[hidden] { display: none !important; }

.account-app {
  --account-topbar-height: 58px;
  --workspace-tool-dock-height: 68px;
  --workspace-desktop-max-width: 1192px;
  --vs-account-workspace-bg: color-mix(in srgb, var(--mist) 42%, var(--paper));
  --vs-account-bg: var(--mist);
  --vs-account-bg-soft: #f8f5ee;
  --vs-account-surface: rgba(255, 252, 245, .78);
  --vs-account-surface-solid: var(--paper);
  --vs-account-ink: var(--ink);
  --vs-account-muted: var(--ink-soft);
  --vs-account-accent: var(--teal);
  --vs-account-gold: var(--gold);
  --vs-account-line: var(--line);
  --vs-account-line-strong: rgba(20, 32, 30, .22);
  --vs-account-radius: var(--radius);
  --vs-account-shadow: 0 16px 42px rgba(20, 32, 30, .055);
  min-height: 100svh;
  color: var(--vs-account-ink);
  background: var(--vs-account-bg);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

/* Final My Cards responsive contract. Keep this after legacy account rules so
   phone layouts cannot fall back to the former horizontal rail. */
@media (max-width: 820px),
       (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .cards-page--mobile .cards-library-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
  }

  .cards-page--mobile :is(
    .cards-library-filter,
    .cards-library-folder-chip,
    .cards-library-add-folder
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .cards-page--mobile :is(.cards-library-filter, .cards-library-add-folder) {
    min-height: 44px;
  }

  .cards-page--mobile .cards-library-folder-chip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  .cards-page--mobile .cards-library-folder-menu {
    display: none !important;
  }

  .cards-page--mobile .cards-library-folder-select {
    width: 100%;
    min-width: 0;
    padding: 5px 6px 5px 8px !important;
  }

  .cards-page--mobile .cards-library-folder-select > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  body[data-account-route="charts"] .cards-page--desktop {
    display: none !important;
  }

  body[data-account-route="charts"] .cards-page--mobile {
    display: block !important;
  }

  body[data-account-route="charts"] .account-mobile-nav {
    display: grid !important;
  }

  body[data-account-route="charts"] .cards-page--mobile {
    padding-bottom: calc(var(--mobile-m1-nav-height, 66px) + 12px + env(safe-area-inset-bottom));
  }
}

/* Keep the centered catalog authoritative over legacy drawer/mobile rules. */
.account-app .widget-drawer {
  place-items: center;
  padding: clamp(18px, 4vw, 44px);
}

.account-app .widget-drawer-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-self: center;
  justify-self: center;
  gap: 16px;
  width: min(980px, calc(100vw - 48px));
  height: min(84svh, 790px);
  max-height: 790px;
  padding: clamp(20px, 2.5vw, 30px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--vs-account-line) 88%, transparent);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, rgb(197 148 79 / 9%), transparent 32%),
    var(--paper);
  box-shadow: 0 30px 90px rgb(10 24 21 / 32%), 0 3px 16px rgb(10 24 21 / 12%);
}

.account-app .widget-drawer-header {
  align-items: flex-start;
}

.account-app .widget-drawer-header h2 {
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.account-app .widget-catalog-search {
  gap: 10px;
  margin: 0;
}

.account-app .widget-catalog-search input {
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
}

.account-app .widget-catalog button[data-widget-status="planned"] {
  border-style: solid;
}

@media (max-width: 860px) {
  .account-app .widget-drawer {
    place-items: center;
    padding: 14px;
  }

  .account-app .widget-drawer-panel {
    align-self: center;
    justify-self: center;
    width: min(700px, 100%);
    height: min(88svh, 760px);
    max-height: min(88svh, 760px);
    padding: 20px;
    border: 1px solid var(--vs-account-line);
    border-radius: 22px;
    box-shadow: 0 24px 72px rgb(10 24 21 / 30%);
  }
}

@media (max-width: 560px) {
  .account-app .widget-drawer {
    place-items: center;
    padding: 10px;
  }

  .account-app .widget-drawer-panel {
    align-self: center;
    justify-self: center;
    gap: 12px;
    width: 100%;
    height: min(90svh, 760px);
    max-height: min(90svh, 760px);
    padding: 16px 14px;
    border-radius: 20px;
  }
}

/* Centered visual catalog for adding workspace blocks. */
.widget-drawer {
  place-items: center;
  padding: clamp(18px, 4vw, 44px);
}

.widget-drawer > .workspace-overlay {
  background: rgb(13 27 24 / 48%);
  backdrop-filter: blur(5px);
}

.widget-drawer-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-self: center;
  justify-self: center;
  gap: 16px;
  width: min(980px, calc(100vw - 48px));
  height: min(84svh, 790px);
  max-height: 790px;
  padding: clamp(20px, 2.5vw, 30px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--vs-account-line) 88%, transparent);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, rgb(197 148 79 / 9%), transparent 32%),
    var(--paper);
  box-shadow: 0 30px 90px rgb(10 24 21 / 32%), 0 3px 16px rgb(10 24 21 / 12%);
  animation: widget-catalog-enter 180ms ease-out both;
}

@keyframes widget-catalog-enter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.widget-drawer-header {
  align-items: flex-start;
  padding-bottom: 2px;
}

.widget-drawer-header > div {
  display: grid;
  gap: 3px;
}

.widget-drawer-header span {
  color: var(--vs-account-teal, var(--teal));
  font-size: .68rem;
  letter-spacing: .11em;
}

.widget-drawer-header h2 {
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.08;
}

.widget-drawer-header .account-icon-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 84%, var(--mist));
  font-size: 1.1rem;
}

.widget-drawer-panel > p {
  max-width: 70ch;
  font-size: .82rem;
  line-height: 1.55;
}

.widget-catalog-search {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 7px 6px 15px;
  border: 1px solid var(--vs-account-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 88%, var(--mist));
  color: var(--vs-account-ink);
  font-size: .74rem;
  font-weight: 800;
}

.widget-catalog-search::before {
  content: "⌕";
  color: var(--vs-account-teal, var(--teal));
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}

.widget-catalog-search > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.widget-catalog-search input {
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  font-size: .82rem;
}

.widget-catalog-search input:focus {
  outline: 0;
}

.widget-catalog-search:focus-within {
  border-color: color-mix(in srgb, var(--vs-account-teal, var(--teal)) 55%, var(--vs-account-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-account-teal, var(--teal)) 12%, transparent);
}

.widget-catalog {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  padding: 2px 7px 18px 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--vs-account-gold, var(--gold)) 36%, transparent) transparent;
}

.widget-catalog-group {
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--vs-account-line) 82%, transparent);
  border-radius: 17px;
  background: color-mix(in srgb, var(--paper) 84%, var(--mist));
}

.widget-catalog-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.widget-catalog-group h3 {
  font-size: .7rem;
  letter-spacing: .095em;
}

.widget-catalog-group > header > span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vs-account-teal, var(--teal)) 9%, transparent);
  color: var(--vs-account-muted);
  font-size: .64rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.widget-catalog-group > div {
  gap: 8px;
}

.widget-catalog button.widget-catalog-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 10px 10px 13px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 1px 0 rgb(16 24 25 / 3%);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.widget-catalog button.widget-catalog-item:hover {
  border-color: color-mix(in srgb, var(--vs-account-gold, var(--gold)) 48%, var(--vs-account-line));
  background: color-mix(in srgb, var(--vs-account-gold, var(--gold)) 8%, var(--paper));
  box-shadow: 0 8px 22px rgb(43 54 50 / 8%);
  transform: translateY(-1px);
}

.widget-catalog-item-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.widget-catalog-item-copy strong {
  overflow-wrap: anywhere;
  font-size: .78rem;
  line-height: 1.28;
}

.widget-catalog-item-copy small {
  color: var(--vs-account-gold, var(--gold));
  font-size: .64rem;
  font-weight: 800;
}

.widget-catalog-item-add {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--vs-account-teal, var(--teal)) 9%, transparent);
  color: var(--vs-account-teal, var(--teal));
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

.widget-catalog button.widget-catalog-item:hover .widget-catalog-item-add {
  background: var(--vs-account-teal, var(--teal));
  color: var(--paper);
}

.widget-catalog button[data-widget-status="planned"] {
  border-style: solid;
  opacity: .72;
}

.widget-catalog button[data-widget-status="planned"] small {
  color: var(--vs-account-gold, var(--gold));
}

@media (max-width: 860px) {
  .widget-drawer {
    place-items: center;
    padding: 14px;
  }

  .widget-drawer-panel {
    align-self: center;
    justify-self: center;
    width: min(700px, 100%);
    height: min(88svh, 760px);
    max-height: min(88svh, 760px);
    padding: 20px;
    border: 1px solid var(--vs-account-line);
    border-radius: 22px;
    box-shadow: 0 24px 72px rgb(10 24 21 / 30%);
  }

  .widget-catalog {
    grid-template-columns: minmax(0, 1fr);
  }

  .widget-catalog-group > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .widget-drawer {
    align-items: center;
    padding: 10px;
  }

  .widget-drawer-panel {
    align-self: center;
    justify-self: center;
    gap: 12px;
    width: 100%;
    height: min(90svh, 760px);
    max-height: min(90svh, 760px);
    padding: 16px 14px;
    border-radius: 20px;
  }

  .widget-drawer-header h2 {
    font-size: 1.45rem;
  }

  .widget-drawer-panel > p {
    font-size: .76rem;
  }

  .widget-catalog-group {
    padding: 12px;
  }

  .widget-catalog-group > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .widget-catalog button.widget-catalog-item {
    min-height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .widget-drawer-panel {
    animation: none;
  }
}

/* Global search: cards, curated celebrity records and Knowledge. */
.account-global-search {
  position: relative;
  min-width: 0;
  width: min(520px, 42vw);
}

.account-global-search-mobile-trigger,
.account-global-search-mobile-header {
  display: none;
}

.account-global-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 180;
  width: min(720px, calc(100vw - 32px));
  max-height: min(720px, calc(100svh - var(--account-topbar-height) - 28px));
  overflow: auto;
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--vs-account-line) 86%, var(--vs-account-gold));
  border-radius: 18px;
  background: color-mix(in srgb, var(--vs-account-surface-solid) 97%, white);
  box-shadow: 0 24px 70px rgba(11, 24, 23, .24);
  color: var(--vs-account-ink);
  overscroll-behavior: contain;
}

.account-global-search-results[hidden] {
  display: none;
}

.account-global-search-group {
  padding: 15px 14px 10px;
  border-bottom: 1px solid var(--vs-account-line);
}

.account-global-search-group:last-child {
  border-bottom: 0;
}

.account-global-search-group > h2 {
  margin: 0 8px 8px;
  color: var(--vs-account-teal);
  font: 800 .71rem/1.2 var(--font-sans, sans-serif);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.account-global-search-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  width: 100%;
  min-height: 54px;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.account-global-search-option:hover,
.account-global-search-option:focus-visible,
.account-global-search-option.is-active {
  outline: none;
  background: color-mix(in srgb, var(--vs-account-teal) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-account-teal) 18%, transparent);
}

.account-global-search-option-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  align-self: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--vs-account-teal) 10%, var(--vs-account-surface-solid));
  color: var(--vs-account-teal);
  font-weight: 850;
}

.account-global-search-option > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-global-search-option strong {
  overflow: hidden;
  font-size: .91rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-global-search-option em {
  color: var(--vs-account-muted);
  font-size: .78rem;
  font-style: normal;
}

.account-global-search-option small {
  overflow: hidden;
  color: var(--vs-account-muted);
  font-size: .75rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-global-search-reliability {
  margin-top: 3px;
  color: color-mix(in srgb, var(--vs-account-gold) 76%, var(--vs-account-ink));
  font-size: .69rem;
  font-weight: 750;
}

.account-global-search-celebrity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.account-global-search-save {
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--vs-account-gold) 48%, var(--vs-account-line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--vs-account-gold) 9%, var(--vs-account-surface-solid));
  color: var(--vs-account-ink);
  font: 800 .75rem/1 var(--font-sans, sans-serif);
  cursor: pointer;
}

.account-global-search-save:hover,
.account-global-search-save:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vs-account-gold) 68%, transparent);
  outline-offset: 2px;
}

.account-global-search-save:disabled {
  cursor: wait;
  opacity: .6;
}

.account-global-search-prompt,
.account-global-search-empty,
.account-global-search-progress {
  display: grid;
  gap: 5px;
  padding: 24px;
  color: var(--vs-account-muted);
  text-align: center;
}

.account-global-search-prompt strong,
.account-global-search-empty strong {
  color: var(--vs-account-ink);
}

.account-global-search-recent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}

.account-global-search-recent small {
  flex-basis: 100%;
}

.account-global-search-recent button {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--vs-account-line);
  border-radius: 999px;
  background: transparent;
  color: var(--vs-account-ink);
  font: 700 .75rem/1 var(--font-sans, sans-serif);
  cursor: pointer;
}

.account-global-search-empty button,
.account-global-search-progress button {
  justify-self: center;
  min-height: 40px;
  margin-top: 7px;
  padding: 0 15px;
  border: 1px solid var(--vs-account-line);
  border-radius: 10px;
  background: var(--vs-account-surface-solid);
  color: var(--vs-account-ink);
  font: inherit;
  cursor: pointer;
}

.account-global-search-progress {
  padding-block: 10px;
  font-size: .73rem;
}

.account-global-search-progress.is-error {
  color: #8c493f;
}

.celebrity-preview-surface {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: grid;
  place-items: center;
  padding: 24px;
}

.celebrity-preview-surface[hidden] {
  display: none;
}

.celebrity-preview-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(8, 19, 18, .62);
  backdrop-filter: blur(5px);
}

.celebrity-preview-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: min(820px, calc(100svh - 48px));
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--vs-account-gold) 38%, var(--vs-account-line));
  border-radius: 22px;
  outline: none;
  background: var(--vs-account-surface-solid);
  box-shadow: 0 30px 90px rgba(7, 20, 18, .34);
  color: var(--vs-account-ink);
}

.celebrity-preview-panel > div {
  display: grid;
  gap: 20px;
  padding: 26px;
}

.celebrity-preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.celebrity-preview-header span {
  color: var(--vs-account-teal);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.celebrity-preview-header h2 {
  margin: 5px 0 2px;
  font-family: var(--font-serif, serif);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1;
}

.celebrity-preview-header p {
  margin: 0;
  color: var(--vs-account-muted);
}

.celebrity-preview-header button {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--vs-account-line);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: 700 1.45rem/1 sans-serif;
  cursor: pointer;
}

.celebrity-preview-warning {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-left: 3px solid var(--vs-account-gold);
  border-radius: 4px 12px 12px 4px;
  background: color-mix(in srgb, var(--vs-account-gold) 10%, transparent);
}

.celebrity-preview-warning span {
  color: var(--vs-account-muted);
  font-size: .84rem;
}

.celebrity-preview-variants {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.celebrity-preview-variants legend {
  margin-bottom: 8px;
  font-weight: 800;
}

.celebrity-preview-variants label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 12px;
  border: 1px solid var(--vs-account-line);
  border-radius: 12px;
  cursor: pointer;
}

.celebrity-preview-variants label:has(input:checked) {
  border-color: var(--vs-account-teal);
  background: color-mix(in srgb, var(--vs-account-teal) 7%, transparent);
}

.celebrity-preview-variants input {
  width: 18px;
  height: 18px;
  accent-color: var(--vs-account-teal);
}

.celebrity-preview-variants span {
  display: grid;
  gap: 3px;
}

.celebrity-preview-variants small {
  color: var(--vs-account-muted);
}

.celebrity-preview-facts,
.celebrity-preview-source dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--vs-account-line);
  border-radius: 14px;
  background: var(--vs-account-line);
}

.celebrity-preview-facts > div,
.celebrity-preview-source dl > div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: var(--vs-account-surface-solid);
}

.celebrity-preview-facts dt,
.celebrity-preview-source dt {
  color: var(--vs-account-muted);
  font-size: .69rem;
  font-weight: 750;
  text-transform: uppercase;
}

.celebrity-preview-facts dd,
.celebrity-preview-source dd {
  margin: 0;
  font-size: .86rem;
}

.celebrity-preview-source {
  display: grid;
  gap: 9px;
}

.celebrity-preview-source h3,
.celebrity-preview-source p,
.celebrity-preview-source ul {
  margin: 0;
}

.celebrity-preview-source p,
.celebrity-preview-source li {
  color: var(--vs-account-muted);
  font-size: .82rem;
  line-height: 1.5;
}

.celebrity-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.celebrity-preview-actions > button,
.celebrity-preview-actions > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--vs-account-line);
  border-radius: 11px;
  background: transparent;
  color: var(--vs-account-ink);
  font: 750 .82rem/1.2 var(--font-sans, sans-serif);
  text-decoration: none;
  cursor: pointer;
}

.celebrity-preview-actions > .account-primary-action {
  border-color: var(--vs-account-teal);
  background: var(--vs-account-teal);
  color: #fffdf5;
}

.celebrity-preview-actions > button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.celebrity-admin-page {
  padding: 28px;
}

.celebrity-admin-page > div {
  display: grid;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}

.celebrity-admin-providers,
.celebrity-admin-record {
  border: 1px solid var(--vs-account-line);
  border-radius: 16px;
  background: var(--vs-account-surface-solid);
}

.celebrity-admin-providers {
  padding: 18px;
}

.celebrity-admin-providers h2 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.celebrity-admin-providers ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.celebrity-admin-providers li {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--vs-account-line);
  border-radius: 10px;
}

.celebrity-admin-providers span,
.celebrity-admin-providers small {
  color: var(--vs-account-muted);
}

.celebrity-admin-providers [data-license-status="pending"] {
  color: #9b6234;
}

.celebrity-admin-search {
  display: grid;
  gap: 6px;
  font-weight: 750;
}

.celebrity-admin-search input,
.celebrity-admin-fields input,
.celebrity-admin-fields select,
.celebrity-admin-record footer input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--vs-account-line);
  border-radius: 10px;
  background: var(--vs-account-surface-solid);
  color: var(--vs-account-ink);
  font: inherit;
}

.celebrity-admin-tabs {
  display: flex;
  gap: 8px;
}

.celebrity-admin-status-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 3px;
}

.celebrity-admin-status-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(25, 75, 68, .14);
  border-radius: 999px;
  background: #fff;
  color: #526560;
  font-weight: 700;
}

.celebrity-admin-status-tabs button[aria-pressed="true"] {
  border-color: #176e62;
  background: #e7efeb;
  color: #134f47;
}

.celebrity-admin-tabs button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(25, 75, 68, .16);
  border-radius: 12px;
  background: #fff;
  color: #31504a;
  font-weight: 750;
}

.celebrity-admin-tabs button[aria-pressed="true"] {
  border-color: #176e62;
  background: #e7efeb;
  color: #134f47;
}

.celebrity-admin-moderation {
  display: grid;
  gap: 14px;
}

.celebrity-admin-moderation > label {
  display: grid;
  gap: 6px;
  max-width: 260px;
  color: #596965;
  font-size: 13px;
  font-weight: 700;
}

.celebrity-admin-moderation select {
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid rgba(25, 75, 68, .16);
  border-radius: 10px;
  background: #fff;
}

.celebrity-admin-list {
  display: grid;
  gap: 12px;
}

.celebrity-admin-record {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.celebrity-admin-record > header,
.celebrity-admin-record > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.celebrity-admin-record > header div {
  display: grid;
  gap: 2px;
}

.celebrity-admin-record > header span,
.celebrity-admin-record > header small {
  color: var(--vs-account-muted);
}

.celebrity-admin-fields {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.celebrity-admin-fields label,
.celebrity-admin-record footer label {
  display: grid;
  gap: 5px;
  font-size: .75rem;
  font-weight: 750;
}

.celebrity-admin-fields .celebrity-admin-enabled {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.celebrity-admin-record button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--vs-account-line);
  border-radius: 10px;
  background: transparent;
  color: var(--vs-account-ink);
  font: 750 .8rem/1 var(--font-sans, sans-serif);
  cursor: pointer;
}

.celebrity-admin-state {
  margin: 0;
  padding: 22px;
  border: 1px solid var(--vs-account-line);
  border-radius: 14px;
}

.celebrity-admin-state.is-error {
  color: #8c493f;
}

@media (max-width: 760px) {
  .account-topbar {
    grid-template-columns: minmax(0, 1fr) 44px auto;
    gap: 6px;
  }

  .account-global-search {
    display: block;
    width: 44px;
  }

  .account-global-search > .account-search {
    display: none;
  }

  .account-global-search-mobile-trigger {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(247, 242, 231, .18);
    border-radius: 50%;
    background: rgba(247, 242, 231, .08);
    color: var(--ivory);
    font: 700 1.45rem/1 sans-serif;
  }

  .account-global-search.is-mobile-open {
    position: fixed;
    inset: 0;
    z-index: 420;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: auto;
    padding: 14px;
    background: var(--vs-account-surface-solid);
  }

  .account-global-search.is-mobile-open > .account-global-search-mobile-trigger {
    display: none;
  }

  .account-global-search.is-mobile-open > .account-search {
    display: block;
    z-index: 2;
  }

  .account-global-search.is-mobile-open .account-search input {
    min-height: 48px;
    border-color: var(--vs-account-line);
    border-radius: 13px;
    background: #fff;
    color: var(--vs-account-ink);
    padding-inline: 15px;
  }

  .account-global-search.is-mobile-open .account-search input::placeholder {
    color: var(--vs-account-muted);
  }

  .account-global-search-results {
    position: static;
    width: auto;
    max-height: none;
    margin-top: 10px;
    transform: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .account-global-search-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 6px 8px;
  }

  .account-global-search-mobile-header button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--vs-account-line);
    border-radius: 50%;
    background: transparent;
    color: var(--vs-account-ink);
    font: 700 1.4rem/1 sans-serif;
  }

  .account-global-search-group {
    padding-inline: 2px;
  }

  .account-global-search-option {
    min-height: 58px;
  }

  .account-global-search-save {
    min-width: 44px;
    min-height: 44px;
  }

  .celebrity-preview-surface {
    align-items: end;
    padding: 0;
  }

  .celebrity-preview-panel {
    width: 100%;
    max-height: min(88svh, 860px);
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
  }

  .celebrity-preview-panel > div {
    gap: 17px;
    padding: 20px 16px max(22px, env(safe-area-inset-bottom));
  }

  .celebrity-preview-facts,
  .celebrity-preview-source dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .celebrity-preview-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .celebrity-admin-page {
    padding: 18px 14px;
  }

  .celebrity-admin-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .celebrity-admin-record > header,
  .celebrity-admin-record > footer {
    display: grid;
    align-items: stretch;
  }
}

/* Account v1 R5: mobile-safe release shell. Keep this final block after the
   historical component layers so it is the single responsive override. */
@supports (min-height: 100dvh) {
  .account-app {
    min-height: 100dvh;
  }

  .account-layout {
    min-height: calc(100dvh - var(--account-topbar-height));
  }
}

.account-skip-link {
  position: fixed;
  z-index: 1000;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--ivory);
  background: var(--teal);
  transform: translateY(-180%);
}

.account-skip-link:focus {
  transform: translateY(0);
}

.charts-page {
  grid-template-columns: minmax(0, 1fr);
}

.charts-page > div,
.cards-page--mobile,
.cards-page--desktop {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 820px) {
  .account-topbar {
    padding-top: env(safe-area-inset-top);
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .account-brand,
  .account-icon-button,
  .account-global-search-mobile-trigger,
  .account-profile-button,
  .account-mobile-nav a,
  .account-mobile-nav button,
  .workspace-sheet-mobile-trigger,
  .workspace-sheet-add,
  .workspace-edit-mode-toggle,
  [data-workspace-edit-toggle],
  .workspace-widget-drag-handle,
  .workspace-widget-actions button,
  .workspace-widget [data-open-widget-action-menu],
  .workspace-chart-widget-header button,
  .workspace-chart-varga-control select,
  .cards-library-filter,
  .cards-library-folder-chip,
  .cards-library-add-folder,
  .cards-source-tabs button,
  .cards-mobile-folder select,
  .cards-mobile-controls button {
    min-height: 44px;
  }

  .account-icon-button,
  .account-global-search-mobile-trigger,
  .workspace-sheet-add,
  .workspace-widget-drag-handle,
  .workspace-widget-actions button,
  .workspace-widget [data-open-widget-action-menu],
  .workspace-chart-widget-header button,
  .cards-library-add-folder {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .account-profile-button {
    min-height: 44px;
  }

  .account-mobile-nav {
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    padding-left: max(8px, env(safe-area-inset-left));
  }

  .cards-page--mobile {
    box-sizing: border-box;
    overflow-x: clip;
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
    padding-left: max(10px, env(safe-area-inset-left));
  }

  .cards-library-folder-select {
    min-height: 44px;
    padding-right: 48px;
  }

  .cards-library-folder-menu {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  @media (hover: none), (pointer: coarse) {
    .cards-library-folder-menu {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .account-app .workspace-page .workspace-widget:not(.yogas-widget) > .workspace-widget-header,
  .account-app .workspace-page .workspace-widget > .workspace-chart-widget-header {
    min-height: 48px !important;
    height: auto !important;
    grid-template-rows: minmax(44px, auto) !important;
  }

  .workspace-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .workspace-widget {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .workspace-widget-drag-handle,
  .workspace-widget-actions button,
  .workspace-chart-widget-header button {
    min-height: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    width: 44px !important;
  }

  .workspace-sheet-switcher,
  .workspace-sheet-bar {
    min-height: 46px;
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .workspace-sheet-mobile-trigger,
  .workspace-sheet-add {
    min-height: 44px;
    height: 44px;
  }

  .workspace-widget-action-panel,
  .workspace-tool-popover,
  .workspace-sheet-mobile-panel,
  .widget-drawer-panel,
  .new-chart-panel,
  .workspace-chart-picker-panel,
  .workspace-sheet-settings-panel,
  .varshaphala-wizard-panel {
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    overscroll-behavior: contain;
  }

  .workspace-widget-action-panel,
  .workspace-tool-popover,
  .workspace-sheet-mobile-panel {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .new-chart-form :is(input, select, textarea),
  .account-global-search-results input,
  .workspace-chart-picker input,
  .workspace-transit-settings-surface :is(input, select, textarea),
  .varshaphala-wizard :is(input, select, textarea) {
    font-size: 16px;
  }

  .transit-planet {
    position: relative;
  }

  .transit-planet::before {
    position: absolute;
    inset: -10px;
    content: "";
  }
}

@media (max-width: 430px) {
  .workspace-page .workspace-widget.workspace-widget-chart {
    --workspace-widget-header-height: 90px;
    grid-template-rows: 90px minmax(0, 1fr) !important;
  }

  .account-app .workspace-page .workspace-widget > .workspace-chart-widget-header {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    grid-template-rows: 44px 44px !important;
    min-height: 90px !important;
    height: 90px !important;
    overflow: visible !important;
  }

  .workspace-chart-widget-header > .workspace-widget-drag-handle {
    grid-column: 1;
    grid-row: 1;
  }

  .workspace-chart-widget-header > .workspace-widget-actions {
    grid-column: 3;
    grid-row: 1;
  }

  .workspace-page .workspace-chart-widget-header .workspace-chart-header-controls {
    position: static !important;
    grid-column: 1 / -1;
    grid-row: 2;
    inset: auto !important;
    display: flex;
    gap: 2px;
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    pointer-events: auto;
  }

  .workspace-chart-varga-control {
    position: static !important;
    flex: 1 1 92px;
    width: auto !important;
    min-width: 76px;
    transform: none !important;
  }

  .workspace-chart-varga-control select {
    height: 44px;
    min-height: 44px;
    font-size: 16px;
  }

  .workspace-chart-source-control,
  .workspace-chart-context-control,
  .workspace-chart-source-control select,
  .workspace-chart-context-control select,
  button.workspace-chart-context-control {
    height: 44px !important;
    min-height: 44px !important;
  }

  .workspace-chart-source-control select,
  .workspace-chart-context-control select,
  button.workspace-chart-context-control {
    font-size: 16px;
  }

  .workspace-chart-header-controls > button {
    flex: 0 0 44px;
  }
}

/* My Cards product library v4: one semantic row and one capability set;
   only the menu presentation changes between desktop and mobile. */
.mobile-chart-switch[hidden] {
  display: none !important;
}

.cards-row-primary {
  width: 100%;
  padding: 8px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cards-row-primary:hover,
.cards-row-primary:focus-visible {
  background: color-mix(in srgb, var(--vs-account-green, #17695f) 5%, transparent);
  outline: 2px solid color-mix(in srgb, var(--vs-account-green, #17695f) 24%, transparent);
  outline-offset: -2px;
}

.cards-row-name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.cards-row-astro small {
  color: var(--vs-account-muted);
  font-size: .7rem;
  line-height: 1.35;
}

.cards-row-actions {
  align-self: center;
  gap: 0;
}

.cards-favorite,
.cards-overflow {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 10px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--vs-account-muted);
  cursor: pointer;
}

.cards-favorite:hover,
.cards-favorite:focus-visible,
.cards-overflow:hover,
.cards-overflow:focus-visible {
  background: color-mix(in srgb, var(--vs-account-green, #17695f) 8%, transparent);
  color: var(--vs-account-ink);
  outline: 2px solid color-mix(in srgb, var(--vs-account-green, #17695f) 22%, transparent);
  outline-offset: -2px;
}

.cards-favorite.is-active {
  color: var(--vs-account-gold, #9b7130);
}

.cards-favorite.is-active .cards-action-icon--favorite {
  fill: currentColor;
}

.cards-action-icon {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cards-action-surface:not([hidden]) {
  position: fixed;
  z-index: 360;
  inset: 0;
  display: block;
  pointer-events: none;
}

.cards-action-backdrop {
  display: none;
}

.cards-action-panel {
  position: fixed;
  top: var(--cards-action-top, 72px);
  right: var(--cards-action-right, 16px);
  width: min(300px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 12px;
  background: var(--vs-account-surface-solid, #fffdf7);
  box-shadow: 0 18px 46px rgba(16, 24, 25, .2);
  outline: none;
  pointer-events: auto;
}

.cards-action-sheet-handle {
  display: none;
}

.cards-action-panel > header {
  display: grid;
  gap: 3px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--vs-account-line);
}

.cards-action-panel > header strong {
  overflow: hidden;
  color: var(--vs-account-ink);
  font-size: .84rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cards-action-panel > header small {
  overflow: hidden;
  color: var(--vs-account-muted);
  font-size: .69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cards-action-items {
  display: grid;
  padding-top: 5px;
}

.cards-action-items button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .78rem;
  font-weight: 620;
  text-align: left;
  cursor: pointer;
}

.cards-action-items button:hover,
.cards-action-items button:focus-visible {
  background: color-mix(in srgb, var(--vs-account-green, #17695f) 7%, transparent);
  outline: none;
}

.cards-action-items button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cards-action-divider {
  height: 1px;
  margin: 5px 10px;
  background: var(--vs-account-line);
}

.cards-action-items button.is-destructive {
  color: #a13830;
}

.cards-action-items button.is-destructive:hover,
.cards-action-items button.is-destructive:focus-visible {
  background: color-mix(in srgb, #a13830 7%, transparent);
}

.account-mobile-nav :is(a, button) > span:first-child svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 820px),
       (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  body[data-account-route="charts"] .account-landscape-new-chart {
    display: none !important;
  }

  .cards-page--mobile {
    padding-top: 4px;
    padding-bottom: calc(var(--mobile-m1-nav-height, 66px) + 24px + env(safe-area-inset-bottom));
  }

  .cards-mobile-header {
    min-height: 26px;
    margin: 0;
  }

  .cards-mobile-header p {
    margin: 0;
    color: var(--vs-account-muted);
    font-size: .71rem;
    font-weight: 620;
  }

  .cards-library-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
  }

  .cards-library-filter,
  .cards-library-folder-chip,
  .cards-library-add-folder {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
  }

  .cards-library-folder-select {
    width: 100%;
  }

  .cards-library-folder-select > span {
    max-width: none;
  }

  .cards-mobile-list {
    border-top-color: color-mix(in srgb, var(--vs-account-line) 86%, transparent);
  }

  .cards-mobile-row {
    grid-template-columns: minmax(0, 1fr) 88px;
    min-height: 104px;
    gap: 2px;
    padding: 4px 0;
  }

  .cards-mobile-row .cards-row-primary {
    align-content: center;
    gap: 7px;
    min-height: 96px;
    padding: 9px 4px;
  }

  .cards-mobile-row .cards-row-identity {
    gap: 4px;
  }

  .cards-mobile-row .cards-row-name {
    font-size: .94rem;
    font-weight: 680;
    line-height: 1.26;
  }

  .cards-mobile-row .cards-row-meta {
    display: grid;
    gap: 1px;
    color: var(--vs-account-muted);
    font-size: .74rem;
    line-height: 1.35;
  }

  .cards-mobile-row .cards-row-meta > :not(:first-child)::before {
    content: none;
  }

  .cards-mobile-row .cards-row-astro {
    display: grid;
    width: auto;
    max-width: 100%;
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: .73rem;
  }

  .cards-mobile-row .cards-row-astro span,
  .cards-mobile-row .cards-row-astro small {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .cards-mobile-row .cards-row-actions {
    display: grid;
    grid-template-columns: 44px 44px;
    align-self: start;
    gap: 0;
    padding-top: 7px;
  }

  .cards-action-surface.is-mobile-sheet:not([hidden]) {
    display: grid;
    align-items: end;
    pointer-events: auto;
  }

  .cards-action-surface.is-mobile-sheet .cards-action-backdrop {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(8, 20, 20, .44);
  }

  .cards-action-surface.is-mobile-sheet .cards-action-panel {
    position: relative;
    top: auto;
    right: auto;
    z-index: 1;
    width: 100%;
    max-height: min(82dvh, 620px);
    box-sizing: border-box;
    padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -16px 48px rgba(16, 24, 25, .22);
  }

  .cards-action-surface.is-mobile-sheet .cards-action-sheet-handle {
    display: block;
    width: 42px;
    height: 4px;
    margin: 2px auto 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-account-muted) 34%, transparent);
  }

  .cards-action-surface.is-mobile-sheet .cards-action-panel > header {
    padding: 7px 8px 13px;
  }

  .cards-action-surface.is-mobile-sheet .cards-action-panel > header strong {
    font-size: .96rem;
  }

  .cards-action-surface.is-mobile-sheet .cards-action-items button {
    min-height: 52px;
    font-size: .83rem;
  }

  .chart-delete-dialog:not([hidden]) {
    z-index: 370;
  }

  .chart-delete-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .cards-page--mobile {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .cards-action-surface.is-mobile-sheet .cards-action-panel {
    max-height: calc(100dvh - 8px);
  }
}

/* Compact current-card switcher: the card name lives in the hero, while the
   sheet strip remains navigation only. */
.workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header] {
  grid-template-columns: minmax(0, 1fr) 38px minmax(58px, auto);
}

.workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header]:has(
  .workspace-sheet-tabs > .workspace-sheet-tab-primary:only-child
) {
  grid-template-columns: minmax(0, 1fr) 38px minmax(58px, auto);
}

.workspace-unified-tabbar .workspace-sheet-tab-primary,
.workspace-unified-tabbar .workspace-sheet-tabs > .workspace-sheet-tab-primary:only-child {
  position: relative;
  left: auto;
  flex: 0 0 auto;
  width: auto;
  min-width: 112px;
  max-width: 190px;
  box-shadow: none !important;
}

.workspace-chart-picker-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: 360px;
  max-height: min(540px, calc(100dvh - 92px));
}

.workspace-chart-picker-search[hidden] { display: none !important; }

.workspace-chart-picker-option {
  grid-template-columns: 20px minmax(0, 1fr) auto;
}

.workspace-chart-picker-option-marker {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  font-size: 12px;
  font-weight: 900;
}

.workspace-chart-picker-option.is-selected .workspace-chart-picker-option-marker {
  border: 0;
  background: var(--vs-account-accent, var(--teal));
  color: #fff;
  box-shadow: none;
}

.workspace-chart-picker-footer {
  justify-content: flex-start;
  min-height: 52px;
  padding: 8px 14px;
}

.workspace-chart-picker-footer button {
  min-height: 40px;
}

@media (max-width: 760px) {
  .workspace-chart-picker-panel {
    width: 100%;
    max-height: min(82dvh, 690px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .workspace-chart-picker-results,
  .workspace-chart-picker-option {
    max-width: 100%;
    overflow-x: hidden;
  }

  .workspace-chart-picker-option,
  .workspace-chart-picker-footer button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-sheet-hero__chart-switch-spinner { animation: none; }
}

@media (max-width: 340px) {
  .workspace-page .workspace-widget.workspace-widget-chart {
    --workspace-widget-header-height: 138px;
    grid-template-rows: 138px minmax(0, 1fr) !important;
  }

  .account-app .workspace-page .workspace-widget > .workspace-chart-widget-header {
    grid-template-rows: 44px 88px !important;
    min-height: 138px !important;
    height: 138px !important;
  }

  .workspace-page .workspace-chart-widget-header .workspace-chart-header-controls {
    align-content: start;
    flex-wrap: wrap;
    height: 88px;
    overflow: visible !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .workspace-widget-action-panel,
  .workspace-tool-popover,
  .widget-drawer-panel,
  .new-chart-panel,
  .workspace-chart-picker-panel,
  .varshaphala-wizard-panel {
    max-height: calc(100dvh - 12px);
  }
}

/* R3 server persistence status for the two managed workspace sheets. */
.workspace-sync-indicator {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, #38755b 30%, transparent);
  border-radius: 9px;
  color: #315c49;
  background: color-mix(in srgb, #eef8f1 88%, transparent);
  font-size: 12px;
  line-height: 1.25;
}

.workspace-sync-indicator[hidden] { display: none !important; }
.workspace-sync-indicator[data-sync-state="offline"],
.workspace-sync-indicator[data-sync-state="conflict"] {
  color: #8d342f;
  border-color: color-mix(in srgb, #a5453f 35%, transparent);
  background: #fff4f2;
}

.workspace-sync-indicator-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.workspace-sync-indicator button {
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 7px;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.workspace-sync-conflict-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workspace-sync-conflict-actions[hidden] { display: none !important; }

@media (max-width: 760px) {
  .workspace-sync-indicator { font-size: 11px; }
  .workspace-sync-conflict-actions { width: 100%; }
}

/* System workspace sheet: Varshaphala */
.varshaphala-sheet-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  border: 1px solid rgba(32, 55, 46, .14);
  border-radius: 18px;
  background: #f7f3e9;
  box-shadow: 0 14px 32px rgba(38, 49, 43, .06);
}

.varshaphala-sheet-heading > span {
  color: #176f61;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}

.varshaphala-sheet-heading h1 {
  margin: 6px 0 8px;
  color: #172c25;
  font-family: Literata, Georgia, serif;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.08;
}

.varshaphala-sheet-heading p {
  margin: 0;
  color: #68756f;
  font-size: 14px;
}

.varshaphala-sheet-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.varshaphala-sheet-controls button,
.varshaphala-filter-row button,
.varshaphala-chip-row button,
.varshaphala-tab-row button {
  min-height: 44px;
  border: 1px solid rgba(32, 55, 46, .18);
  border-radius: 11px;
  background: #fcfaf4;
  color: #344640;
  font: 650 13px/1.2 Inter, sans-serif;
  cursor: pointer;
}

.varshaphala-sheet-controls button {
  padding: 10px 13px;
}

.varshaphala-widget .workspace-widget-body {
  color: #33443e;
}

.varshaphala-widget-state {
  display: grid;
  min-height: 220px;
  place-content: center;
  justify-items: start;
  padding: 28px;
  background: linear-gradient(135deg, rgba(244, 239, 226, .72), rgba(249, 247, 240, .95));
}

.varshaphala-widget-state strong {
  color: #20372f;
  font-family: Literata, Georgia, serif;
  font-size: 21px;
}

.varshaphala-widget-state p {
  max-width: 44ch;
  margin: 10px 0 18px;
  color: #6c7873;
}

.varshaphala-widget-state button,
.varshaphala-key-factor button {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #1b7365;
  border-radius: 10px;
  background: transparent;
  color: #176f61;
  font-weight: 750;
}

.varshaphala-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.varshaphala-key-factor {
  position: relative;
  min-height: 150px;
  padding: 18px;
  border: 1px solid rgba(32, 55, 46, .14);
  border-radius: 14px;
  background: #faf8f1;
}

.varshaphala-key-factor.is-crowned {
  border-color: rgba(179, 126, 40, .4);
  background: #fbf6e8;
}

.varshaphala-key-factor > span,
.varshaphala-current-periods li > span {
  display: block;
  color: #77827d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.varshaphala-key-factor > strong {
  display: block;
  margin-top: 6px;
  color: #20372f;
  font-family: Literata, Georgia, serif;
  font-size: 21px;
}

.varshaphala-key-factor.is-crowned > strong span {
  color: #b07b24;
}

.varshaphala-key-factor p {
  min-height: 34px;
  margin: 8px 0 12px;
  color: #66736e;
  font-size: 13px;
}

.varshaphala-candidates h3,
.varshaphala-relation-summary h3 {
  margin: 22px 0 10px;
  color: #20372f;
  font-family: Literata, Georgia, serif;
}

.varshaphala-candidates ul,
.varshaphala-relation-summary ul,
.varshaphala-conditions,
.varshaphala-current-periods {
  margin: 0;
  padding: 0;
  list-style: none;
}

.varshaphala-candidates li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 64px;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid rgba(32, 55, 46, .1);
}

.varshaphala-candidates li[data-eligible="false"] {
  color: #8b9490;
}

.varshaphala-candidates small {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.varshaphala-relation-summary dl,
.varshaphala-compact-details,
.varshaphala-methodology dl,
.varshaphala-profile-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: rgba(32, 55, 46, .1);
}

.varshaphala-relation-summary dl > div,
.varshaphala-compact-details > div,
.varshaphala-methodology dl > div,
.varshaphala-profile-summary dl > div {
  padding: 12px;
  background: #faf8f1;
}

.varshaphala-relation-summary dt,
.varshaphala-compact-details dt,
.varshaphala-methodology dt,
.varshaphala-profile-summary dt {
  color: #79837f;
  font-size: 11px;
}

.varshaphala-relation-summary dd,
.varshaphala-compact-details dd,
.varshaphala-methodology dd,
.varshaphala-profile-summary dd {
  margin: 4px 0 0;
  color: #263a33;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.varshaphala-style-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, .55fr);
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  color: #344640;
  font-weight: 700;
}

.varshaphala-style-choice select {
  min-height: 44px;
  padding: 8px 34px 8px 11px;
  border: 1px solid rgba(32, 55, 46, .18);
  border-radius: 10px;
  background: #faf8f1;
}

.varshaphala-relation-summary li button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid rgba(32, 55, 46, .1);
  background: transparent;
  color: #344640;
  text-align: left;
}

.varshaphala-filter-row,
.varshaphala-chip-row,
.varshaphala-tab-row {
  display: flex;
  gap: 7px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.varshaphala-filter-row button,
.varshaphala-chip-row button,
.varshaphala-tab-row button {
  flex: 0 0 auto;
  padding: 8px 12px;
}

.varshaphala-filter-row button[aria-pressed="true"],
.varshaphala-chip-row button[aria-pressed="true"],
.varshaphala-tab-row button[aria-selected="true"] {
  border-color: #176f61;
  background: #e7efeb;
  color: #155e53;
}

.varshaphala-list {
  display: grid;
  gap: 8px;
}

.varshaphala-list > article {
  border: 1px solid rgba(32, 55, 46, .12);
  border-radius: 12px;
  background: #fbfaf5;
  overflow: hidden;
}

.varshaphala-list > article[data-month-confirmed="true"] {
  border-color: rgba(176, 123, 36, .45);
  box-shadow: inset 3px 0 0 rgba(176, 123, 36, .65);
}

.varshaphala-list-main {
  display: grid;
  grid-template-columns: minmax(120px, .75fr) minmax(150px, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: #344640;
  text-align: left;
}

.varshaphala-list-main strong {
  color: #20372f;
}

.varshaphala-list-main small {
  color: #78837e;
  text-align: right;
}

.varshaphala-conditions,
.varshaphala-compact-details {
  margin: 0 14px 14px;
}

.varshaphala-conditions li {
  padding: 5px 0 5px 18px;
  color: #63706b;
  font-size: 13px;
}

.varshaphala-conditions li::before {
  content: "✓";
  margin-left: -18px;
  padding-right: 7px;
  color: #176f61;
}

.varshaphala-methodology {
  margin: 10px 14px 14px;
  color: #69756f;
  font-size: 12px;
}

.varshaphala-methodology summary {
  min-height: 32px;
  cursor: pointer;
}

.varshaphala-table-wrap {
  max-width: 100%;
  overflow: auto;
}

.varshaphala-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.varshaphala-table-wrap th,
.varshaphala-table-wrap td {
  min-width: 74px;
  padding: 11px 9px;
  border-bottom: 1px solid rgba(32, 55, 46, .11);
  text-align: left;
  white-space: nowrap;
}

.varshaphala-table-wrap tbody th button {
  min-height: 36px;
  border: 0;
  background: transparent;
  color: #176f61;
  font-weight: 750;
}

.varshaphala-period-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.varshaphala-period-toolbar label {
  display: grid;
  gap: 5px;
}

.varshaphala-period-toolbar select {
  min-height: 44px;
  padding: 8px 34px 8px 11px;
  border: 1px solid rgba(32, 55, 46, .18);
  border-radius: 10px;
  background: #faf8f1;
}

.varshaphala-current-periods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.varshaphala-current-periods li {
  padding: 14px;
  border: 1px solid rgba(32, 55, 46, .13);
  border-radius: 12px;
  background: #faf8f1;
}

.varshaphala-current-periods strong,
.varshaphala-current-periods time {
  display: block;
  margin-top: 5px;
}

.varshaphala-current-periods time {
  color: #6d7974;
  font-size: 12px;
}

.varshaphala-period-strip {
  display: flex;
  gap: 7px;
  margin-top: 14px;
  overflow-x: auto;
}

.varshaphala-period-strip button {
  display: grid;
  flex: 0 0 138px;
  min-height: 58px;
  padding: 9px;
  border: 1px solid rgba(32, 55, 46, .15);
  border-radius: 10px;
  background: #fbfaf5;
  color: #344640;
  text-align: left;
}

.varshaphala-period-strip button[aria-current="true"] {
  border-color: #b07b24;
  background: #fbf3dd;
}

.varshaphala-period-strip span {
  color: #76817c;
  font-size: 11px;
}

.varshaphala-month-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.varshaphala-month-grid button {
  display: grid;
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(32, 55, 46, .14);
  border-radius: 11px;
  background: #faf8f1;
  color: #344640;
  text-align: left;
}

.varshaphala-month-grid button[aria-pressed="true"] {
  border-color: #176f61;
  background: #e8efeb;
}

.varshaphala-month-grid span {
  color: #75807b;
  font-size: 11px;
}

.chart-widget:has(.varshaphala-chart-overlay) .workspace-widget-body {
  position: relative;
}

.varshaphala-chart-overlay {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(32, 55, 46, .18);
  border-radius: 12px;
  background: rgba(250, 248, 241, .94);
  box-shadow: 0 8px 20px rgba(25, 43, 36, .1);
  backdrop-filter: blur(8px);
}

.varshaphala-chart-overlay > span:first-child {
  margin-right: auto;
  color: #52635c;
  font-size: 12px;
  font-weight: 750;
}

.varshaphala-chart-overlay button {
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid rgba(32, 55, 46, .13);
  border-radius: 9px;
  background: #fffdf8;
  color: #344640;
}

.varshaphala-chart-overlay button:first-of-type b {
  color: #b07b24;
}

.varshaphala-aspect-mode {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(32, 55, 46, .13);
  border-radius: 10px;
  background: rgba(255, 253, 248, .8);
}

.varshaphala-aspect-mode > span {
  padding: 0 7px;
  color: #65746e;
  font-size: 11px;
  font-weight: 750;
}

.varshaphala-chart-overlay .varshaphala-aspect-mode button {
  min-height: 30px;
  padding: 4px 8px;
  border-color: transparent;
  background: transparent;
  font-size: 11px;
  font-weight: 750;
}

.varshaphala-chart-overlay .varshaphala-aspect-mode button[aria-pressed="true"] {
  border-color: rgba(23, 111, 97, .24);
  background: #e4eee8;
  color: #155f53;
  box-shadow: 0 1px 3px rgba(25, 43, 36, .08);
}

.varshaphala-tajaka-aspect-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.varshaphala-tajaka-aspect-line {
  fill: none;
  stroke-width: 1.65;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.varshaphala-tajaka-aspect-line.is-strong-harmonious {
  stroke: rgba(67, 145, 109, .72);
}

.varshaphala-tajaka-aspect-line.is-friendly {
  stroke: rgba(112, 129, 82, .68);
}

.varshaphala-tajaka-aspect-line.is-tense {
  stroke: rgba(190, 101, 70, .72);
}

.varshaphala-tajaka-aspect-line.is-conjunction {
  stroke: rgba(43, 104, 95, .78);
  stroke-width: 1.8;
}

.varshaphala-tajaka-aspect-line.is-applying {
  stroke-dasharray: none;
}

.varshaphala-tajaka-aspect-line.is-separating {
  stroke-dasharray: 6 5;
  opacity: .78;
}

.varshaphala-tajaka-aspect-line.is-exact {
  stroke-dasharray: none;
  stroke-width: 2;
}

.varshaphala-tajaka-aspect-line.is-stationary,
.varshaphala-tajaka-aspect-line.is-outside-deeptamsha {
  stroke-width: 1;
  opacity: .34;
}

.varshaphala-tajaka-aspect-exact-marker {
  fill: #f8f5ed;
  stroke: rgba(43, 104, 95, .9);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.varshaphala-tajaka-aspect-hit {
  position: absolute;
  z-index: 4;
  height: 18px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  transform-origin: 0 50%;
  appearance: none;
  pointer-events: auto;
  cursor: help;
}

.varshaphala-tajaka-aspect-hit:focus-visible {
  outline: 1px dashed rgba(23, 111, 97, .7);
  outline-offset: 2px;
}

.varshaphala-tajaka-aspect-line.is-interactive {
  stroke-width: 2.5;
  opacity: 1;
}

.varshaphala-aspect-tooltip {
  position: absolute;
  z-index: 6;
  display: grid;
  gap: 6px;
  width: min(260px, calc(100% - 16px));
  padding: 11px 12px;
  border: 1px solid rgba(32, 55, 46, .2);
  border-radius: 11px;
  background: rgba(255, 253, 248, .98);
  color: #263b34;
  box-shadow: 0 12px 28px rgba(25, 43, 36, .18);
  pointer-events: none;
}

.varshaphala-aspect-tooltip[hidden] {
  display: none;
}

.varshaphala-aspect-tooltip > strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
}

.varshaphala-aspect-tooltip > span {
  color: #176f61;
  font-size: 12px;
  font-weight: 800;
}

.varshaphala-aspect-tooltip dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.varshaphala-aspect-tooltip dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}

.varshaphala-aspect-tooltip dt {
  color: #718079;
}

.varshaphala-aspect-tooltip dd {
  margin: 0;
  font-weight: 750;
  text-align: right;
}

.varshaphala-chart-selection {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 12px;
  display: grid;
  padding: 7px 10px;
  border: 1px solid rgba(176, 123, 36, .35);
  border-radius: 9px;
  background: rgba(251, 246, 232, .94);
  color: #715322;
  pointer-events: none;
}

.varshaphala-chart-selection span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.varshaphala-muntha-point {
  z-index: 8;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #176f61;
  border-radius: 50%;
  background: #f7fbf8;
  box-shadow: 0 3px 10px rgba(23, 111, 97, .2);
  color: #176f61;
  font: 800 11px/1 Inter, sans-serif;
}

.varshaphala-muntha-point-south {
  position: absolute;
  right: 6px;
  bottom: 6px;
}

.varshaphala-muntha-point-north {
  position: absolute;
  transform: translate(-50%, 18px);
}

.varshaphala-varshesha-crown {
  position: absolute;
  top: -14px;
  left: 50%;
  display: block;
  width: 18px;
  height: 18px;
  color: #b07b24;
  filter: drop-shadow(0 1px 0 #fff9e9);
  transform: translateX(-50%);
  pointer-events: none;
}

.varshaphala-varshesha-crown svg,
.varshaphala-crown-icon {
  display: block;
  width: 100%;
  height: 100%;
  fill: rgba(197, 148, 79, .2);
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.planet:has(.varshaphala-varshesha-crown) {
  position: relative;
}

.is-varshaphala-factor-highlighted {
  filter: drop-shadow(0 0 5px rgba(176, 123, 36, .72));
  outline: 2px solid rgba(176, 123, 36, .58);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .varshaphala-sheet-header button,
  .varshaphala-widget:not(.varshaphala-widget-varshaphala-periods) button {
    min-height: 44px;
  }
}

.varshaphala-wizard[hidden] {
  display: none;
}

.varshaphala-wizard {
  position: fixed;
  z-index: 210;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}

.varshaphala-wizard-panel {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(880px, calc(100vh - 40px));
  border: 1px solid rgba(32, 55, 46, .16);
  border-radius: 20px;
  background: #f8f5ed;
  box-shadow: 0 24px 90px rgba(20, 32, 28, .25);
  overflow: auto;
}

.varshaphala-wizard-panel > .workspace-sheet-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
}

.varshaphala-wizard-panel > .workspace-sheet-dialog-header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.varshaphala-wizard-panel > .workspace-sheet-dialog-header span {
  color: #6e7a75;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.varshaphala-wizard-panel > .workspace-sheet-dialog-header h2 {
  margin: 0;
  color: #1f352d;
  font: 600 clamp(24px, 3vw, 34px)/1.15 Literata, Georgia, serif;
}

.varshaphala-wizard-panel > .workspace-sheet-dialog-header .workspace-sheet-dialog-close {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(32, 55, 46, .18);
  border-radius: 50%;
  background: #fffdf8;
  color: #263a33;
  font: 400 22px/1 Inter, sans-serif;
}

.varshaphala-wizard-panel form {
  padding: 0 24px 24px;
}

.varshaphala-wizard-steps {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(32, 55, 46, .12);
  border-radius: 15px;
  background: rgba(32, 55, 46, .08);
  overflow: visible;
}

.varshaphala-wizard-steps > li {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 16px;
  background: #fcfaf4;
}

.varshaphala-wizard-steps > li:first-child {
  border-radius: 14px 14px 0 0;
}

.varshaphala-wizard-steps > li:last-child {
  border-radius: 0 0 14px 14px;
}

.varshaphala-wizard-steps label {
  display: grid;
  grid-template-columns: minmax(170px, .8fr) minmax(220px, 1fr);
  align-items: center;
  gap: 16px;
}

.varshaphala-wizard-steps label > span,
.varshaphala-wizard-step-label {
  color: #263a33;
  font-weight: 750;
}

.varshaphala-wizard-steps b {
  display: inline-grid;
  width: 25px;
  height: 25px;
  margin-right: 7px;
  place-items: center;
  border-radius: 50%;
  background: #e5eee9;
  color: #176f61;
  font-size: 12px;
}

.varshaphala-wizard-steps select,
.varshaphala-wizard-steps input[type="search"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(32, 55, 46, .2);
  border-radius: 10px;
  background: #fffef9;
  color: #263a33;
}

.varshaphala-wizard-steps small {
  color: #77817d;
  line-height: 1.45;
}

.varshaphala-location-results {
  position: absolute;
  z-index: 5;
  top: 68px;
  right: 16px;
  width: min(420px, calc(100% - 32px));
  max-height: 270px;
  padding: 5px;
  border: 1px solid rgba(32, 55, 46, .18);
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 16px 42px rgba(25, 43, 36, .18);
  overflow-y: auto;
}

.varshaphala-location-results button {
  display: grid;
  width: 100%;
  min-height: 52px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #344640;
  text-align: left;
}

.varshaphala-location-results button:hover {
  background: #edf2ef;
}

.varshaphala-location-results span {
  color: #73807a;
  font-size: 12px;
}

.varshaphala-profile-summary {
  margin-top: 8px;
}

.varshaphala-wizard-progress {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
  padding: 14px;
  border-radius: 11px;
  background: #e8efeb;
  color: #275147;
}

.varshaphala-wizard-progress > span {
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, #176f61 0 55%, #b9cbc4 55%);
  animation: varshaphala-progress 1.2s ease-in-out infinite alternate;
}

@keyframes varshaphala-progress {
  to { transform: scaleX(.72); transform-origin: left; }
}

.varshaphala-wizard-error[data-state="info"] {
  color: var(--ink-soft);
  background: transparent;
  border-color: var(--line);
}

.varshaphala-wizard-error {
  margin: 14px 0 0;
  padding: 12px;
  border: 1px solid rgba(159, 70, 53, .25);
  border-radius: 10px;
  background: #f8ece8;
  color: #824235;
}

.varshaphala-wizard-panel form > footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}

.varshaphala-wizard-panel form > footer button {
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid rgba(32, 55, 46, .2);
  border-radius: 10px;
  background: #fffdf8;
  color: #344640;
  font-weight: 750;
}

.varshaphala-wizard-panel form > footer button[type="submit"] {
  border-color: #176f61;
  background: #176f61;
  color: white;
}

@media (max-width: 1024px) {
  .varshaphala-sheet-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .varshaphala-sheet-controls {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .varshaphala-sheet-header {
    padding: 20px 16px;
  }

  .varshaphala-sheet-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .varshaphala-sheet-controls button {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .varshaphala-overview-grid,
  .varshaphala-relation-summary dl,
  .varshaphala-compact-details,
  .varshaphala-methodology dl,
  .varshaphala-profile-summary dl,
  .varshaphala-current-periods {
    grid-template-columns: 1fr;
  }

  .varshaphala-list-main {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .varshaphala-list-main small {
    text-align: left;
  }

  .varshaphala-chart-overlay {
    position: relative;
    inset: auto;
    margin: 8px;
  }

  .varshaphala-chart-selection {
    position: relative;
    inset: auto;
    margin: 8px;
  }

  .varshaphala-wizard {
    align-items: end;
    padding: 0;
  }

  .varshaphala-wizard-panel {
    max-height: 94vh;
    border-radius: 18px 18px 0 0;
  }

  .varshaphala-wizard-panel form {
    padding: 0 14px 18px;
  }

  .varshaphala-wizard-panel > .workspace-sheet-dialog-header {
    padding: 16px 14px 12px;
  }

  .varshaphala-wizard-steps label {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .varshaphala-location-results {
    position: static;
    width: 100%;
  }

  .varshaphala-wizard-panel form > footer {
    position: sticky;
    bottom: -1px;
    padding: 10px 0;
    background: #f8f5ed;
  }
}

/* Knowledge · verified chart database */
.celebrity-base-panel {
  display: grid;
  gap: 28px;
}

.celebrity-base-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  padding: 34px 36px;
  border: 1px solid rgba(22, 66, 59, .12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 12%, rgba(211, 160, 72, .17), transparent 30%),
    #fbfaf5;
}

.celebrity-base-intro h1 {
  margin: 4px 0 8px;
  font-size: clamp(38px, 5vw, 64px);
}

.celebrity-base-intro > div:last-child,
.celebrity-base-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.celebrity-base-intro button,
.celebrity-base-detail-actions button,
.celebrity-base-card footer button,
.celebrity-base-more {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(22, 66, 59, .2);
  border-radius: 12px;
  background: #fffdf7;
  color: #173a33;
  font: inherit;
  font-weight: 700;
}

.celebrity-base-intro button:last-child,
.celebrity-base-detail-actions button:last-child,
.celebrity-base-card footer button:last-child {
  border-color: #176e62;
  background: #176e62;
  color: #fff;
}

.celebrity-base-filters {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(130px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 20px;
  border: 1px solid rgba(22, 66, 59, .12);
  border-radius: 20px;
  background: rgba(255, 255, 255, .72);
}

.celebrity-base-filters label {
  display: grid;
  gap: 7px;
  color: #61706c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.celebrity-base-filters input,
.celebrity-base-filters select,
.celebrity-base-form-grid input,
.celebrity-base-form-grid textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid rgba(22, 66, 59, .18);
  border-radius: 11px;
  background: #fff;
  color: #15332d;
  font: inherit;
}

.celebrity-base-filters button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  color: #53635f;
  background: #eceee9;
  font-weight: 750;
}

.celebrity-base-categories {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.celebrity-base-categories h2 {
  margin: 0 0 12px;
  font-size: 22px;
}

.celebrity-base-categories > div {
  display: flex;
  gap: 9px;
  overflow-x: auto;
}

.celebrity-base-categories button {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid rgba(22, 66, 59, .16);
  border-radius: 999px;
  background: #fffdf8;
  color: #31544d;
  font-weight: 750;
}

.celebrity-base-results {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.celebrity-base-results > header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 16px;
}

.celebrity-base-results > header p {
  margin-bottom: 3px;
  color: #176e62;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.celebrity-base-results > header h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
}

.celebrity-base-results > header > span {
  color: #687671;
  font-weight: 700;
}

.celebrity-base-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.celebrity-base-card {
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  border: 1px solid rgba(22, 66, 59, .13);
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: 0 14px 34px rgba(27, 52, 47, .055);
}

.celebrity-base-card-main {
  display: block;
  width: 100%;
  padding: 22px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.celebrity-base-card-category {
  color: #9a641f;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.celebrity-base-card h3 {
  margin: 8px 0 3px;
  font-size: 24px;
  line-height: 1.08;
}

.celebrity-base-card-main > p {
  min-height: 20px;
  color: #6b7774;
}

.celebrity-base-card dl,
.celebrity-base-detail dl {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.celebrity-base-card dl div,
.celebrity-base-detail dl div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 10px;
}

.celebrity-base-card dt,
.celebrity-base-detail dt {
  color: #7b8783;
  font-size: 12px;
}

.celebrity-base-card dd,
.celebrity-base-detail dd {
  margin: 0;
  color: #263d38;
  font-weight: 680;
}

.celebrity-base-reliability {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 8px;
  background: #e8f1ed;
  color: #176e62;
  font-size: 12px;
  font-weight: 800;
}

.celebrity-base-reliability.is-dd,
.celebrity-base-reliability.is-unknown {
  background: #f2eee5;
  color: #795e36;
}

.celebrity-base-card footer {
  display: flex;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid rgba(22, 66, 59, .09);
}

.celebrity-base-card footer button {
  flex: 1;
  padding: 0 10px;
  font-size: 13px;
}

.celebrity-base-card footer button:disabled {
  opacity: .7;
}

.celebrity-base-more {
  display: block;
  margin: 22px auto 0;
}

.celebrity-base-status {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-height: 220px;
  align-content: center;
  padding: 28px;
  border: 1px dashed rgba(22, 66, 59, .22);
  border-radius: 18px;
  color: #66736f;
}

.celebrity-base-status.is-error {
  color: #8b3c36;
  border-color: rgba(139, 60, 54, .3);
}

.celebrity-base-detail,
.celebrity-base-submission {
  padding: 32px;
  border: 1px solid rgba(22, 66, 59, .13);
  border-radius: 22px;
  background: #fffdf8;
}

.celebrity-base-detail > header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 24px 0 28px;
}

.celebrity-base-detail > header h2,
.celebrity-base-submission h2 {
  margin: 4px 0;
  font-size: clamp(34px, 4vw, 52px);
}

.celebrity-base-detail-columns {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 18px;
}

.celebrity-base-detail-columns > section,
.celebrity-base-sources {
  padding: 22px;
  border: 1px solid rgba(22, 66, 59, .1);
  border-radius: 16px;
  background: #faf9f3;
}

.celebrity-base-variants {
  display: grid;
  gap: 10px;
}

.celebrity-base-variants article {
  padding: 14px;
  border: 1px solid rgba(22, 66, 59, .1);
  border-radius: 12px;
  background: #fff;
}

.celebrity-base-variants article header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.celebrity-base-sources {
  margin-top: 18px;
}

.celebrity-base-sources ul,
.celebrity-base-submission ul {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.celebrity-base-sources li,
.celebrity-base-submission li {
  display: grid;
  gap: 3px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(22, 66, 59, .1);
}

.celebrity-base-sources li span,
.celebrity-base-submission li span {
  color: #6a7773;
  font-size: 13px;
}

.celebrity-base-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0;
}

.celebrity-base-form-grid label {
  display: grid;
  gap: 7px;
  color: #52645f;
  font-size: 13px;
  font-weight: 750;
}

.celebrity-base-form-grid .is-wide {
  grid-column: 1 / -1;
}

.celebrity-base-form-grid textarea {
  min-height: 100px;
  resize: vertical;
}

.celebrity-base-form-grid .celebrity-base-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
}

.celebrity-base-checkbox input {
  width: 18px;
  min-height: 18px;
}

.celebrity-base-form-error {
  margin-top: 12px !important;
  color: #9b342d;
}

@media (max-width: 1180px) {
  .celebrity-base-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .celebrity-base-search {
    grid-column: span 2;
  }

  .celebrity-base-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .celebrity-base-intro,
  .celebrity-base-detail > header {
    align-items: stretch;
    flex-direction: column;
  }

  .celebrity-base-intro,
  .celebrity-base-detail,
  .celebrity-base-submission {
    padding: 22px 18px;
  }

  .celebrity-base-filters,
  .celebrity-base-form-grid,
  .celebrity-base-detail-columns,
  .celebrity-base-grid {
    grid-template-columns: 1fr;
  }

  .celebrity-base-search,
  .celebrity-base-form-grid .is-wide {
    grid-column: auto;
  }
}

/* Real, snapshot-bound Ashtakavarga widget. */
.ashtakavarga-widget-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
}

.ashtakavarga-title-and-style {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.ashtakavarga-widget-title {
  position: relative;
  min-width: 0;
}

.workspace-widget.ashtakavarga-panel-professional > .ashtakavarga-widget-header {
  position: relative;
  z-index: 12;
  overflow: visible;
}

.workspace-widget.ashtakavarga-panel-professional .ashtakavarga-widget-title {
  overflow: visible;
  white-space: normal;
}

.ashtakavarga-help-target {
  cursor: help;
  text-decoration: underline dotted color-mix(in srgb, var(--vs-account-accent, var(--teal)) 55%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.ashtakavarga-help-target:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--vs-account-accent, var(--teal));
  outline-offset: 3px;
}

.ashtakavarga-help-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 12;
  width: min(430px, calc(100vw - 56px));
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--vs-account-accent, var(--teal)) 24%, var(--line));
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(20, 32, 30, .14);
  font-size: .74rem;
  font-weight: 500;
  line-height: 1.48;
  overflow-wrap: break-word;
  text-overflow: clip;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
  pointer-events: none;
}

.ashtakavarga-widget-title:hover .ashtakavarga-help-tooltip,
.ashtakavarga-widget-title:focus-within .ashtakavarga-help-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ashtakavarga-bav-selector select {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 750;
}

.ashtakavarga-bav-selector { display: flex; margin: 10px 0 0; }
.ashtakavarga-bav-selector select { min-width: 150px; padding-inline: 9px; }

.ashtakavarga-style-toggle {
  position: relative;
}

.workspace-widget.ashtakavarga-panel-professional { overflow: visible; }

.ashtakavarga-panel-professional > .workspace-widget-body {
  min-width: 0;
  padding: 0;
}

.ashtakavarga-panel-professional .ashtakavarga-view {
  min-width: 0;
  padding: 9px;
}

.ashtakavarga-panel-professional .ashtakavarga-map-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 1fr);
  grid-template-columns: none;
  gap: 7px;
  margin: 0;
  padding: 1px 1px 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.ashtakavarga-panel-professional .ashtakavarga-mini-chart {
  min-width: 148px;
  margin: 0;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--paper) 94%, var(--account-bg, #eef2ec));
}

.ashtakavarga-panel-professional .ashtakavarga-mini-chart figcaption {
  color: var(--ink-soft);
  font-size: .68rem;
  font-weight: 750;
  text-align: center;
}

.ashtakavarga-panel-professional .ashtakavarga-frame,
.ashtakavarga-panel-professional .ashtakavarga-grid {
  stroke: color-mix(in srgb, var(--ink) 54%, var(--line));
  stroke-width: .65;
}

.ashtakavarga-panel-professional .ashtakavarga-sign-code {
  fill: var(--ink-soft);
  font-size: 4.6px;
  font-weight: 700;
}

.ashtakavarga-panel-professional .ashtakavarga-sign-value {
  fill: var(--ink);
  font-size: 10px;
  font-weight: 850;
}

.ashtakavarga-panel-professional .ashtakavarga-center-label {
  font-size: 14px;
  font-weight: 850;
}

.ashtakavarga-panel-professional .ashtakavarga-mini-chart--south .ashtakavarga-center-label.ashtakavarga-target-sav { fill: var(--ink); }
.ashtakavarga-panel-professional .ashtakavarga-mini-chart--south .ashtakavarga-center-label.ashtakavarga-target-as { fill: #9e5516; }
.ashtakavarga-panel-professional .ashtakavarga-mini-chart--south .ashtakavarga-center-label.ashtakavarga-target-su { fill: #a85b00; }
.ashtakavarga-panel-professional .ashtakavarga-mini-chart--south .ashtakavarga-center-label.ashtakavarga-target-mo { fill: #3f6075; }
.ashtakavarga-panel-professional .ashtakavarga-mini-chart--south .ashtakavarga-center-label.ashtakavarga-target-ma { fill: #c3372f; }
.ashtakavarga-panel-professional .ashtakavarga-mini-chart--south .ashtakavarga-center-label.ashtakavarga-target-me { fill: #087a46; }
.ashtakavarga-panel-professional .ashtakavarga-mini-chart--south .ashtakavarga-center-label.ashtakavarga-target-ju { fill: #b74b0b; }
.ashtakavarga-panel-professional .ashtakavarga-mini-chart--south .ashtakavarga-center-label.ashtakavarga-target-ve { fill: #7a3fa3; }
.ashtakavarga-panel-professional .ashtakavarga-mini-chart--south .ashtakavarga-center-label.ashtakavarga-target-sa { fill: #2156b3; }

.ashtakavarga-panel-professional .ashtakavarga-single-map {
  grid-template-columns: minmax(190px, 340px) minmax(190px, 1fr);
  align-items: start;
  gap: 10px;
  margin-top: 10px;
}

.ashtakavarga-panel-professional .ashtakavarga-single-map .ashtakavarga-mini-chart {
  width: 100%;
  max-width: 340px;
}

.ashtakavarga-panel-professional .ashtakavarga-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto;
}

.ashtakavarga-panel-professional .ashtakavarga-table-wrap table
{
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.ashtakavarga-panel-professional .ashtakavarga-prastara table
{ min-width: 640px; }
.ashtakavarga-panel-professional .ashtakavarga-table-wrap caption {
  padding: 7px;
  color: var(--ink-soft);
  font-size: .68rem;
  font-weight: 750;
  text-align: left;
}

.ashtakavarga-provenance {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .62rem;
}

.ashtakavarga-provenance a { color: var(--teal, #176963); }

@media (max-width: 720px) {
  .ashtakavarga-widget-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .ashtakavarga-widget-header .workspace-widget-actions { grid-column: auto; grid-row: auto; }
  .ashtakavarga-help-tooltip {
    left: -40px;
    width: min(360px, calc(100vw - 28px));
  }

  .ashtakavarga-panel-professional .ashtakavarga-map-grid {
    grid-auto-columns: minmax(176px, 78vw);
    scroll-snap-type: x proximity;
  }

  .ashtakavarga-panel-professional .ashtakavarga-mini-chart { scroll-snap-align: start; }
  .ashtakavarga-panel-professional .ashtakavarga-single-map { grid-template-columns: minmax(0, 1fr); }
  .ashtakavarga-panel-professional .ashtakavarga-single-map .ashtakavarga-mini-chart { margin-inline: auto; }
}

.account-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(220px, 520px) auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: var(--account-topbar-height);
  padding: 0 24px;
  color: var(--ivory);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(16, 24, 25, .84);
  backdrop-filter: blur(18px);
}

.account-topbar-leading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.account-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 14px;
  min-width: 0;
  overflow: visible;
}

.account-brand img {
  display: block;
  width: 138px;
  height: auto;
  max-height: 42px;
  object-fit: contain;
  object-position: left center;
}

.account-topbar-leading-divider {
  width: 1px;
  height: 22px;
  flex: 0 0 1px;
  background: color-mix(in srgb, var(--ivory) 22%, transparent);
}

.account-sidebar-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: color-mix(in srgb, var(--ivory) 82%, transparent);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.account-sidebar-toggle-icon {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-sidebar-toggle-icon--open {
  display: none;
}

.account-app.is-sidebar-collapsed .account-sidebar-toggle-icon--close {
  display: none;
}

.account-app.is-sidebar-collapsed .account-sidebar-toggle-icon--open {
  display: block;
}

.account-sidebar-toggle:hover {
  background: color-mix(in srgb, var(--ivory) 10%, transparent);
  color: var(--ivory);
}

.account-sidebar-toggle:active {
  transform: scale(.96);
}

.account-sidebar-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.account-search {
  position: relative;
  display: block;
  min-width: 0;
}

.account-search span,
.charts-search span,
.charts-sort span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.account-search input,
.charts-search input,
.charts-sort select,
.account-panel input,
.account-panel select,
.new-chart-form input,
.new-chart-form select,
.new-chart-form textarea {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--vs-account-line);
  border-radius: 999px;
  outline: none;
  background: rgba(255, 252, 245, .72);
  color: var(--vs-account-ink);
  font: inherit;
}

.account-search input {
  border-color: rgba(247, 242, 231, .18);
  background: rgba(247, 242, 231, .08);
  color: var(--ivory);
  padding: 0 16px;
}

.account-search input::placeholder {
  color: rgba(247, 242, 231, .48);
}

.account-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.account-icon-button,
.account-profile-button,
.account-primary-action,
.account-secondary-action,
.account-text-action,
.account-mobile-nav button,
.account-mobile-nav a {
  font: inherit;
  cursor: pointer;
}

.account-icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(247, 242, 231, .18);
  border-radius: 50%;
  background: rgba(247, 242, 231, .06);
  color: var(--ivory);
  font-weight: 800;
}

.account-profile-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(247, 242, 231, .18);
  border-radius: 999px;
  background: rgba(247, 242, 231, .06);
  color: var(--ivory);
  font-weight: 700;
}

.account-icon-button:hover,
.account-profile-button:hover {
  border-color: rgba(197, 148, 79, .5);
}

.account-layout {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  min-height: calc(100svh - var(--account-topbar-height));
}

.account-sidebar {
  position: sticky;
  top: var(--account-topbar-height);
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: calc(100svh - var(--account-topbar-height));
  padding: 12px 10px 14px;
  overflow-y: auto;
  border-right: 1px solid var(--vs-account-line);
  background: var(--vs-account-surface);
}

.account-app.is-sidebar-collapsed .account-layout {
  grid-template-columns: minmax(0, 1fr);
}

.account-app.is-sidebar-collapsed .account-sidebar {
  display: none;
}

.account-sidebar-primary {
  display: flex;
  flex-direction: column;
}

.account-primary-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-workspace-nav-group {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.account-workspace-subnav {
  display: grid;
  gap: 1px;
  margin: 0 6px 4px 34px;
  padding-left: 10px;
  border-left: 1px solid var(--vs-account-line);
}

.account-workspace-subnav button {
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--vs-account-muted);
  font: inherit;
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.account-workspace-subnav button:hover {
  background: color-mix(in srgb, var(--vs-account-surface) 94%, var(--vs-account-accent));
  color: var(--vs-account-ink);
}

.account-workspace-subnav button:focus-visible {
  outline: 2px solid var(--vs-account-accent);
  outline-offset: 2px;
}

.account-workspace-subnav button.is-active {
  background: color-mix(in srgb, var(--vs-account-surface) 88%, var(--vs-account-accent));
  color: var(--vs-account-ink);
  font-weight: 600;
}

.account-sidebar-service {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--vs-account-line);
}

.account-sidebar-logout {
  appearance: none;
}

[data-owner-admin-link][hidden] {
  display: none !important;
}

.account-nav-divider {
  display: block;
  height: 1px;
  margin: 8px 12px;
  border-top: 1px solid var(--vs-account-line);
}

.account-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--vs-account-radius);
  background: transparent;
  color: var(--vs-account-muted);
  font: inherit;
  font-size: .84rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.account-nav-icon {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  color: color-mix(in srgb, currentColor 82%, var(--vs-account-accent));
  transition: color .16s ease, transform .16s ease;
}

.account-nav-icon svg {
  display: block;
  width: 21px;
  height: 21px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-nav-label {
  min-width: 0;
}

.account-nav-item:hover {
  background: rgba(197, 148, 79, .08);
  color: var(--vs-account-ink);
}

.account-nav-item:hover .account-nav-icon {
  color: var(--vs-account-accent);
  transform: translateX(1px);
}

.account-nav-item:focus-visible,
.account-sidebar .account-primary-action:focus-visible {
  outline: 2px solid var(--vs-account-accent);
  outline-offset: 2px;
}

.account-nav-item.active,
.account-nav-item[aria-current="page"] {
  color: var(--vs-account-ink);
  background: color-mix(in srgb, var(--vs-account-accent) 10%, transparent);
  box-shadow: inset 2px 0 0 var(--vs-account-accent);
  font-weight: 600;
}

.account-nav-item.active .account-nav-icon,
.account-nav-item[aria-current="page"] .account-nav-icon {
  color: var(--vs-account-accent);
}

.account-primary-action,
.account-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--vs-account-line);
  border-radius: 999px;
  background: rgba(255, 252, 245, .64);
  color: var(--vs-account-ink);
  font-size: .84rem;
  font-weight: 800;
}

.account-primary-action,
.account-secondary-action-gold {
  border-color: rgba(197, 148, 79, .42);
  background: var(--vs-account-gold, var(--gold));
  color: #17211e;
}

.account-sidebar .account-primary-action {
  width: 100%;
  min-height: 42px;
  margin-bottom: 14px;
  border-radius: var(--vs-account-radius);
  box-shadow: none;
}

.account-text-action {
  border: 0;
  background: transparent;
  color: var(--teal);
  font-weight: 800;
}

.account-main {
  min-width: 0;
  container-type: inline-size;
  overflow-x: clip;
  padding: 20px;
}

.account-view {
  display: grid;
  gap: 20px;
  width: 100%;
  min-width: 0;
}

.account-page-heading {
  display: grid;
  gap: 5px;
}

.account-page-heading-row,
.workspace-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.account-page-heading h1 {
  margin: 0;
  color: var(--vs-account-ink);
  font-family: Literata, Georgia, serif;
  font-size: clamp(1.48rem, 2vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
}

.account-page-heading p,
.workspace-context {
  margin: 6px 0 0;
  color: var(--vs-account-muted);
  font-size: .86rem;
}

.workspace-context {
  display: block;
}

.account-save-state {
  color: var(--vs-account-muted);
  font-size: .78rem;
  font-weight: 700;
}

.favorite-quick-access,
.current-workspace,
.charts-page,
.today-page,
.knowledge-page,
.subscription-page,
.settings-page,
.help-page {
  min-width: 0;
}

.account-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 9px;
}

.account-section-bar h2 {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: .84rem;
}

.account-section-bar a {
  color: var(--teal);
  font-size: .78rem;
  font-weight: 800;
}

.favorite-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 3px;
}

.favorite-pill {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--vs-account-line);
  border-radius: 999px;
  background: rgba(255, 252, 245, .72);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
}

.favorite-pill.active {
  border-color: rgba(197, 148, 79, .38);
  background: rgba(197, 148, 79, .12);
}

.charts-row {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) minmax(620px, 1fr) minmax(360px, .72fr);
  column-gap: 16px;
  row-gap: 24px;
  align-items: start;
}

.chart-panel,
.periods-panel,
.planet-table-panel,
.account-card,
.account-panel,
.saved-chart-card {
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  background: var(--vs-account-surface);
  box-shadow: var(--vs-account-shadow);
}

.chart-panel {
  min-width: 620px;
  overflow: visible;
}

.chart-viewer {
  min-width: 620px;
  overflow: visible;
}

.chart-viewer > .chart-panel {
  padding: 14px 14px 16px;
}

.periods-panel {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 260px;
  padding: 24px;
  background:
    radial-gradient(circle at 88% 12%, rgba(197, 148, 79, .09), transparent 34%),
    linear-gradient(145deg, rgba(232, 238, 232, .42), rgba(255, 252, 245, .74));
}

.periods-panel h2,
.planet-table-panel h2 {
  margin: 0;
  color: var(--vs-account-ink);
  font-family: Literata, Georgia, serif;
  font-size: 1.48rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.12;
}

.periods-heading {
  display: grid;
  gap: 5px;
}

.periods-heading span,
.periods-current span,
.periods-next span,
.periods-next p {
  margin: 4px 0 0;
  color: var(--vs-account-muted);
  font-size: .85rem;
}

.periods-current {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-top: 1px solid var(--vs-account-line);
  border-bottom: 1px solid var(--vs-account-line);
}

.periods-current strong {
  color: var(--vs-account-accent);
  font-size: 1.08rem;
  font-weight: 700;
}

.periods-details {
  display: grid;
  gap: 8px;
  margin: 0;
}

.periods-details div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.periods-details dt {
  color: var(--vs-account-muted);
  font-size: .78rem;
}

.periods-details dd {
  margin: 0;
  color: var(--vs-account-ink);
  font-size: .84rem;
  font-weight: 750;
}

.periods-next {
  padding-top: 14px;
  border-top: 1px solid var(--vs-account-line);
}

.periods-next span {
  color: var(--vs-account-accent);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.periods-next p {
  line-height: 1.45;
}

.planet-table-panel {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 22px;
}

.table-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.table-heading span {
  color: var(--vs-account-muted);
  font-size: .75rem;
  font-weight: 700;
}

.planet-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--vs-account-line);
  text-align: left;
  white-space: nowrap;
}

th {
  color: rgba(20, 32, 30, .52);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

td:first-child {
  color: var(--graha-color);
  font-weight: 800;
}

.planet-table-panel .planet-table-wrap > table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.planet-table-panel .planet-table-wrap :is(th, td) {
  box-sizing: border-box;
  min-width: 0;
  padding: 8px 5px;
  line-height: 1.25;
}

.planet-table-panel .planet-table-wrap th {
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.planet-table-panel .planet-table-wrap td {
  font-size: 13px;
  white-space: nowrap;
}

.planet-table-panel .planet-table-wrap :is(th, td):nth-child(1) { width: 14%; }
.planet-table-panel .planet-table-wrap :is(th, td):nth-child(2) { width: 7%; }
.planet-table-panel .planet-table-wrap :is(th, td):nth-child(3) { width: 11%; }
.planet-table-panel .planet-table-wrap :is(th, td):nth-child(4) { width: 14%; }
.planet-table-panel .planet-table-wrap :is(th, td):nth-child(5) { width: 20%; }
.planet-table-panel .planet-table-wrap :is(th, td):nth-child(6) { width: 8%; }
.planet-table-panel .planet-table-wrap :is(th, td):nth-child(7) { width: 6%; }
.planet-table-panel .planet-table-wrap :is(th, td):nth-child(8) { width: 20%; }

.charts-tools,
.settings-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(150px, 220px);
  gap: 10px;
  align-items: center;
}

.charts-search input,
.charts-sort select,
.account-panel input,
.account-panel select,
.new-chart-form input,
.new-chart-form select,
.new-chart-form textarea {
  padding: 0 12px;
}

.new-chart-form textarea {
  min-height: 80px;
  padding: 10px 12px;
  border-radius: var(--vs-account-radius);
  resize: vertical;
}

.charts-view-toggle,
.account-tabs {
  display: flex;
  gap: 6px;
}

.charts-view-toggle button,
.account-tabs button,
.saved-card-actions button,
.help-grid button {
  min-height: 34px;
  border: 1px solid var(--vs-account-line);
  border-radius: 999px;
  background: rgba(255, 252, 245, .66);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}

.charts-view-toggle button,
.account-tabs button {
  padding: 0 12px;
}

.charts-view-toggle button.active,
.account-tabs button.active {
  border-color: rgba(197, 148, 79, .38);
  background: rgba(197, 148, 79, .12);
}

.cards-list {
  display: grid;
  gap: 10px;
}

.saved-chart-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.favorite-star {
  border: 0;
  background: transparent;
  color: rgba(20, 32, 30, .34);
  font-size: 1.1rem;
  cursor: pointer;
}

.favorite-star.active {
  color: var(--vs-account-accent);
}

.saved-chart-card h2 {
  margin: 0 0 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: .98rem;
}

.saved-chart-card p,
.saved-chart-card span {
  display: block;
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .78rem;
}

.saved-card-actions {
  display: flex;
  gap: 6px;
}

.saved-card-actions button {
  padding: 0 10px;
}

.today-hero,
.account-panel {
  padding: 18px;
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  background: linear-gradient(135deg, rgba(232, 238, 232, .78), rgba(255, 252, 245, .9));
}

.today-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
}

.today-hero span,
.account-card span {
  color: var(--teal);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.today-hero strong {
  display: block;
  font-size: 1.05rem;
}

.today-hero p {
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .84rem;
}

.today-hero button {
  min-height: 34px;
  border: 1px solid rgba(31, 92, 90, .28);
  border-radius: 999px;
  background: rgba(255, 252, 245, .52);
  color: var(--teal);
  font-weight: 800;
  cursor: pointer;
}

.today-grid,
.knowledge-library,
.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.account-card {
  position: relative;
  overflow: hidden;
  min-height: 148px;
  padding: 18px;
}

.account-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -58px;
  width: 118px;
  aspect-ratio: 1;
  border: 1px solid rgba(197, 148, 79, .12);
  transform: rotate(45deg);
}

.account-card strong {
  display: block;
  position: relative;
  z-index: 1;
  margin: 9px 0 7px;
  color: var(--vs-account-ink);
  font-size: 1rem;
}

.account-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .84rem;
}

.account-card-accent {
  border-color: rgba(197, 148, 79, .28);
  background: radial-gradient(circle at 86% 16%, rgba(197, 148, 79, .13), transparent 34%), rgba(255, 252, 245, .78);
}

.settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}

.account-panel {
  display: grid;
  gap: 12px;
}

.account-panel h2 {
  margin: 0;
  font-family: Literata, Georgia, serif;
  font-size: 1.2rem;
}

.account-panel label,
.new-chart-form label {
  display: grid;
  gap: 5px;
  color: var(--vs-account-muted);
  font-size: .78rem;
  font-weight: 700;
}

.account-panel label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
}

.account-panel input[type="checkbox"] {
  width: auto;
  min-height: auto;
}

.settings-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.settings-list div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.settings-list dt {
  color: var(--vs-account-muted);
}

.settings-list dd {
  margin: 0;
  font-weight: 800;
}

.help-grid button {
  min-height: 54px;
  padding: 0 16px;
  border-radius: var(--vs-account-radius);
  text-align: left;
}

.profile-menu {
  position: fixed;
  z-index: 80;
  display: grid;
  min-width: 190px;
  padding: 6px;
  border: 1px solid rgba(247, 242, 231, .16);
  border-radius: var(--vs-account-radius);
  background: rgba(16, 24, 25, .96);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
}

.card-action-menu {
  position: fixed;
  z-index: 82;
  display: grid;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  background: rgba(255, 252, 245, .98);
  box-shadow: 0 18px 44px rgba(20, 32, 30, .14);
}

.profile-menu button,
.profile-menu a,
.card-action-menu button {
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.profile-menu button,
.profile-menu a {
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: rgba(247, 242, 231, .82);
  text-decoration: none;
}

.card-action-menu button {
  color: var(--vs-account-ink);
}

.profile-menu button:hover,
.profile-menu a:hover {
  background: rgba(247, 242, 231, .08);
  color: var(--ivory);
}

.card-action-menu button:hover {
  background: rgba(197, 148, 79, .1);
}

.new-chart-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 25, .44);
}

.modal-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  width: min(720px, calc(100% - 28px));
  max-height: calc(100svh - 44px);
  margin: 22px auto;
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--vs-account-line);
  border-radius: calc(var(--vs-account-radius) + 4px);
  background: var(--paper);
  box-shadow: 0 28px 78px rgba(16, 24, 25, .28);
}

.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.modal-header h2 {
  margin: 0;
  font-family: Literata, Georgia, serif;
}

.modal-header p {
  margin: 4px 0 0;
  color: var(--vs-account-muted);
  font-size: .84rem;
}

.new-chart-modal .modal-header .account-icon-button {
  margin-left: auto;
  border-color: var(--vs-account-line);
  background: transparent;
  color: var(--vs-account-ink);
}

.new-chart-modal .modal-actions {
  flex-direction: column;
  justify-content: center;
}

.new-chart-modal .modal-actions [data-new-chart-submit] {
  min-width: min(240px, 100%);
}

.new-chart-modal .chart-form-action-status {
  width: min(520px, 100%);
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}

.new-chart-modal .chart-form-action-status[data-tone="error"] {
  color: #9b3f35;
}

.new-chart-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.new-chart-options section,
.new-chart-form {
  display: grid;
  gap: 8px;
}

.new-chart-options h3 {
  margin: 0 0 4px;
  color: var(--teal);
  font-size: .74rem;
  text-transform: uppercase;
}

.new-chart-options button {
  display: grid;
  gap: 3px;
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  background: rgba(255, 252, 245, .72);
  color: var(--vs-account-ink);
  text-align: left;
  cursor: pointer;
}

.new-chart-options button span {
  color: var(--vs-account-muted);
  font-size: .78rem;
}

.toast-region {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: grid;
  gap: 8px;
}

.account-toast {
  max-width: min(360px, calc(100vw - 28px));
  padding: 11px 13px;
  border: 1px solid rgba(197, 148, 79, .34);
  border-radius: var(--vs-account-radius);
  background: rgba(16, 24, 25, .94);
  color: var(--ivory);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}

.account-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.account-mobile-nav {
  display: none;
}

.account-landscape-new-chart {
  display: none;
}

@media (max-height: 520px) and (orientation: landscape) {
  .account-landscape-new-chart {
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--vs-account-gold) 48%, var(--vs-account-line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-account-surface-solid) 84%, var(--vs-account-gold));
    color: var(--vs-account-ink);
    font-size: 1.25rem;
    line-height: 1;
  }
}

.chart-viewer {
  --bg: #f7f4ed;
  --paper: #fffdf8;
  --ink: #211d18;
  --muted: #80776b;
  --line: rgba(33, 29, 24, .22);
  --line-strong: rgba(33, 29, 24, .42);
  --soft: rgba(255, 255, 255, .62);
  --accent: #c9792f;
  --accent-soft: rgba(201, 121, 47, .14);
  --chart-arudha-color: #176a65;
  --shadow: 0 24px 80px rgba(54, 43, 27, .08);
  color: var(--ink);
  letter-spacing: 0;
}

.chart-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 auto 6px;
  padding: 3px 2px 5px;
}

.chart-info {
  display: grid;
  gap: 2px;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.2;
  text-align: left;
}

.chart-name,
.chart-meta-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-name {
  color: var(--ink);
  font-weight: 560;
  font-size: 13px;
}

.chart-meta-line {
  color: var(--muted);
  font-size: 12px;
}

.chart-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
}

.chart-toolbar .chart-select {
  width: 158px;
  height: 32px;
  padding: 0 28px 0 12px;
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
}

.chart-toolbar .icon-button {
  width: 32px;
  height: 32px;
}

.chart-toolbar .icon-button svg {
  width: 17px;
  height: 17px;
}

.chart-stage {
  width: min(100%, 680px);
  aspect-ratio: 1;
  position: relative;
  container-type: inline-size;
  filter: drop-shadow(var(--shadow));
  margin: 0 auto;
  flex: none;
}

.astro-rings {
  position: absolute;
  inset: 0;
  opacity: 1;
  pointer-events: none;
  transition: opacity .22s ease;
}

.astro-rings svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.chart-stage[data-style="north"] .astro-rings,
.chart-stage[data-style="nabhasa"] .astro-rings {
  opacity: 0;
  pointer-events: none;
}

.south-chart,
.north-chart,
.nabhasa-chart {
  position: absolute;
  inset: 8.8%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.ring-boundary {
  stroke: rgba(33, 29, 24, .24);
  stroke-width: .45;
  vector-effect: non-scaling-stroke;
}

.ring-boundary.nakshatra {
  stroke: rgba(33, 29, 24, .34);
  stroke-width: .65;
}

.ring-track {
  fill: #fffdf8;
  stroke: rgba(33, 29, 24, .12);
  stroke-width: .45;
  vector-effect: non-scaling-stroke;
}

.ring-label {
  fill: rgba(33, 29, 24, .66);
  font-size: 2px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: middle;
  user-select: none;
  pointer-events: none;
}

.ring-label.pada {
  fill: rgba(33, 29, 24, .7);
  font-size: 1.85px;
  font-weight: 520;
}

.ring-label.active {
  fill: rgba(33, 29, 24, .86);
  font-weight: 650;
}

.ring-active-fill {
  fill: var(--graha-fill, rgba(103, 67, 38, .26));
  stroke: none;
  pointer-events: none;
}

.ring-active-fill.nakshatra,
.ring-active-fill.pada {
  fill: var(--graha-fill, rgba(103, 67, 38, .26));
}

.chart-stage[data-style="south"] .south-chart,
.chart-stage[data-style="north"] .north-chart,
.chart-stage[data-style="nabhasa"] .nabhasa-chart {
  opacity: 1;
  pointer-events: auto;
}

.nabhasa-chart {
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--paper) 94%, var(--mist)) 0 34%, transparent 34.5%),
    var(--paper);
}

.nabhasa-svg,
.nabhasa-signs,
.nabhasa-grahas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nabhasa-line {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: .55;
  vector-effect: non-scaling-stroke;
}

.nabhasa-line-soft {
  stroke: var(--line);
}

.nabhasa-center-label,
.nabhasa-sign,
.nabhasa-graha-group {
  position: absolute;
  transform: translate(-50%, -50%);
}

.nabhasa-center-label {
  left: 50%;
  top: 50%;
  color: var(--muted);
  font-family: Literata, Georgia, serif;
  font-size: clamp(.78rem, 3.2cqw, 1rem);
}

.nabhasa-sign {
  color: var(--muted);
  font-size: clamp(.54rem, 2.1cqw, .72rem);
  font-weight: 700;
}

.nabhasa-graha-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 5px;
  width: 23%;
  color: var(--ink);
  text-align: center;
}

.nabhasa-graha-group .planet {
  min-width: 0;
  font-size: clamp(.58rem, 2.35cqw, .84rem);
}

.planet-layer-detail {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: .58em;
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;
}

.chart-stage[data-layer="rashi"] .planet-layer-detail {
  display: none;
}

.chart-stage[data-layer="rashi"] .astro-rings {
  opacity: 0;
  visibility: hidden;
}

.chart-stage[data-layer="nakshatra"] .astro-rings :is(.pada.ring-boundary, .pada.ring-label, .pada.ring-active-fill) {
  display: none;
}

.south-chart {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.south-cell {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  padding: clamp(7px, 1.65cqw, 12px);
  overflow: hidden;
}

.south-cell[data-sign="Pi"] { grid-column: 1; grid-row: 1; }
.south-cell[data-sign="Ar"] { grid-column: 2; grid-row: 1; }
.south-cell[data-sign="Ta"] { grid-column: 3; grid-row: 1; }
.south-cell[data-sign="Ge"] { grid-column: 4; grid-row: 1; }
.south-cell[data-sign="Aq"] { grid-column: 1; grid-row: 2; }
.south-cell[data-sign="Cn"] { grid-column: 4; grid-row: 2; }
.south-cell[data-sign="Cp"] { grid-column: 1; grid-row: 3; }
.south-cell[data-sign="Le"] { grid-column: 4; grid-row: 3; }
.south-cell[data-sign="Sg"] { grid-column: 1; grid-row: 4; }
.south-cell[data-sign="Sc"] { grid-column: 2; grid-row: 4; }
.south-cell[data-sign="Li"] { grid-column: 3; grid-row: 4; }
.south-cell[data-sign="Vi"] { grid-column: 4; grid-row: 4; }

.chart-arudha-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.south-arudha-layer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.south-arudha-group {
  align-self: start;
  justify-self: stretch;
  justify-content: center;
  margin-top: clamp(20px, 4.15cqw, 27px);
  padding: 0 clamp(3px, .7cqw, 5px);
}

.chart-stage[data-arudhas-visible="true"] .south-cell.has-arudha-label .graha.auto {
  top: 56%;
  max-height: 46%;
}

.south-arudha-group[data-sign="Pi"] { grid-column: 1; grid-row: 1; }
.south-arudha-group[data-sign="Ar"] { grid-column: 2; grid-row: 1; }
.south-arudha-group[data-sign="Ta"] { grid-column: 3; grid-row: 1; }
.south-arudha-group[data-sign="Ge"] { grid-column: 4; grid-row: 1; }
.south-arudha-group[data-sign="Aq"] { grid-column: 1; grid-row: 2; }
.south-arudha-group[data-sign="Cn"] { grid-column: 4; grid-row: 2; }
.south-arudha-group[data-sign="Cp"] { grid-column: 1; grid-row: 3; }
.south-arudha-group[data-sign="Le"] { grid-column: 4; grid-row: 3; }
.south-arudha-group[data-sign="Sg"] { grid-column: 1; grid-row: 4; }
.south-arudha-group[data-sign="Sc"] { grid-column: 2; grid-row: 4; }
.south-arudha-group[data-sign="Li"] { grid-column: 3; grid-row: 4; }
.south-arudha-group[data-sign="Vi"] { grid-column: 4; grid-row: 4; }

.chart-arudha-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(2px, .35cqw, 3px);
  max-width: 100%;
  color: var(--chart-arudha-color);
  font-size: clamp(8px, 1.45cqw, 11px);
  font-weight: 620;
  line-height: 1.15;
  letter-spacing: .01em;
}

.north-arudha-group {
  position: absolute;
  z-index: 4;
  justify-content: center;
  width: min(14%, 12cqw);
  transform: translate(-50%, -50%);
  text-align: center;
}

.north-arudha-group[data-count="4"],
.north-arudha-group[data-count="5"],
.north-arudha-group[data-count="6"],
.north-arudha-group[data-count="7"],
.north-arudha-group[data-count="8"] {
  width: min(13%, 11cqw);
  font-size: clamp(7px, 1.25cqw, 10px);
}

.north-arudha-group[data-count="9"],
.north-arudha-group[data-count="10"],
.north-arudha-group[data-count="11"],
.north-arudha-group[data-count="12"] {
  width: min(12%, 10cqw);
  font-size: clamp(6.5px, 1.1cqw, 9px);
  line-height: 1.05;
}

.chart-arudha-marker {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 1px 2px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.chart-arudha-marker + .chart-arudha-marker::before {
  content: "·";
  margin-right: clamp(2px, .4cqw, 3px);
  color: color-mix(in srgb, var(--chart-arudha-color) 58%, transparent);
}

.chart-arudha-marker:hover,
.chart-arudha-marker:focus-visible {
  background: color-mix(in srgb, var(--chart-arudha-color) 10%, transparent);
}

.chart-arudha-marker:focus-visible {
  outline: 1px solid var(--chart-arudha-color);
  outline-offset: 1px;
}

.chart-arudha-error {
  position: absolute;
  left: 50%;
  bottom: clamp(7px, 1.4cqw, 10px);
  max-width: calc(100% - 16px);
  transform: translateX(-50%);
  color: var(--chart-arudha-color);
  font-size: clamp(9px, 1.45cqw, 11px);
  font-weight: 560;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.south-cell.has-lagna::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(18px, 4.8cqw, 28px);
  height: clamp(18px, 4.8cqw, 28px);
  background: linear-gradient(135deg, transparent calc(50% - .5px), rgba(201, 121, 47, .72) calc(50% - .5px), rgba(201, 121, 47, .72) calc(50% + .5px), transparent calc(50% + .5px));
  pointer-events: none;
}

.south-cell.house-selected {
  box-shadow: inset 0 0 0 2px rgba(201, 121, 47, .28);
}

.south-cell.rashi-source {
  box-shadow: inset 0 0 0 2px rgba(201, 121, 47, .34);
  background: rgba(201, 121, 47, .045);
}

.south-cell.rashi-target {
  box-shadow: inset 0 0 0 2px rgba(201, 121, 47, .18);
  background: rgba(201, 121, 47, .035);
}

.south-cell.argala-good {
  box-shadow: inset 0 0 0 2px rgba(111, 140, 124, .3);
  background: rgba(111, 140, 124, .075);
}

.south-cell.argala-bad {
  box-shadow: inset 0 0 0 2px rgba(164, 63, 54, .22);
  background: rgba(164, 63, 54, .055);
}

.south-cell.arudha-source {
  box-shadow: inset 0 0 0 2px rgba(166, 93, 27, .34);
  background: rgba(166, 93, 27, .055);
}

.south-cell.arudha-target {
  box-shadow: inset 0 0 0 2px rgba(25, 105, 96, .38);
  background: rgba(25, 105, 96, .085);
}

.south-cell.arudha-source.arudha-target {
  box-shadow: inset 0 0 0 2px rgba(25, 105, 96, .46), inset 0 0 0 5px rgba(166, 93, 27, .12);
}

.house-number {
  position: absolute;
  left: clamp(7px, 1.45cqw, 10px);
  top: clamp(7px, 1.35cqw, 9px);
  color: rgba(188, 132, 12, .72);
  font-size: clamp(11px, calc(1.9cqw + 1px), 14px);
  line-height: 1;
  font-weight: 520;
  pointer-events: none;
  user-select: none;
}

.south-cell.center {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  display: grid;
  place-items: center;
  z-index: 50;
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .36));
  overflow: visible;
}

.north-chart {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.north-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.north-line {
  fill: none;
  stroke: rgba(33, 29, 24, .34);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.north-signs,
.north-aspects,
.north-grahas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.north-house-zone {
  fill: transparent;
  stroke: none;
  cursor: pointer;
  pointer-events: none;
  transition: fill .16s ease;
}

.chart-stage[data-style="north"] .north-house-zone {
  pointer-events: all;
}

.north-house-zone:hover {
  fill: rgba(201, 121, 47, .045);
}

.north-house-zone.house-selected {
  fill: rgba(201, 121, 47, .075);
}

.north-house-zone.rashi-source {
  fill: rgba(201, 121, 47, .11);
}

.north-house-zone.rashi-target {
  fill: rgba(201, 121, 47, .07);
}

.north-house-zone.argala-good {
  fill: rgba(111, 140, 124, .11);
}

.north-house-zone.argala-bad {
  fill: rgba(164, 63, 54, .08);
}

.north-house-zone.arudha-source {
  fill: rgba(166, 93, 27, .09);
  stroke: rgba(166, 93, 27, .42);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.north-house-zone.arudha-target {
  fill: rgba(25, 105, 96, .13);
  stroke: rgba(25, 105, 96, .5);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.north-sign-number {
  position: absolute;
  color: rgba(188, 132, 12, .92);
  font-size: clamp(11px, calc(2.1cqw + 1px), 15px);
  line-height: 1;
  font-weight: 520;
  transform: translate(-50%, -50%);
  user-select: none;
}

.aspect-label,
.north-aspect-label {
  position: absolute;
  color: rgba(33, 29, 24, .38);
  font-size: clamp(11px, 1.75cqw, 14px);
  line-height: 1;
  font-weight: 460;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.aspect-label {
  left: 50%;
  transform: translateX(-50%);
}

.aspect-label.planet-aspect-label {
  left: clamp(6px, 1.1cqw, 9px);
  bottom: clamp(5px, .95cqw, 7px);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0 clamp(3px, .65cqw, 5px);
  max-width: calc(100% - clamp(12px, 2.2cqw, 18px));
  font-size: clamp(12px, 2cqw, 16px);
  text-align: left;
  transform: none;
}

.aspect-label.planet-aspect-label[data-layout="two-rows"] {
  display: grid;
  grid-template-columns: repeat(var(--aspect-columns), max-content);
  grid-template-rows: repeat(2, auto);
  gap: clamp(1px, .25cqw, 2px) clamp(3px, .65cqw, 5px);
  line-height: 1.05;
  white-space: normal;
}

.planet-aspect-token {
  display: block;
}

.aspect-label.sign-aspect-label {
  bottom: clamp(16px, 2.35cqw, 20px);
}

.north-aspect-label {
  max-width: 14cqw;
  text-align: center;
  white-space: pre-line;
  line-height: 1.12;
  transform: translate(-50%, -50%);
}

.north-aspect-label.planet-aspect-label {
  font-size: clamp(12px, 1.9cqw, 16px);
}

.aspect-label.planet-aspect-label[data-count="4"],
.aspect-label.planet-aspect-label[data-count="5"],
.aspect-label.planet-aspect-label[data-count="6"],
.aspect-label.planet-aspect-label[data-count="7"],
.aspect-label.planet-aspect-label[data-count="8"],
.north-aspect-label.planet-aspect-label[data-count="4"],
.north-aspect-label.planet-aspect-label[data-count="5"],
.north-aspect-label.planet-aspect-label[data-count="6"],
.north-aspect-label.planet-aspect-label[data-count="7"],
.north-aspect-label.planet-aspect-label[data-count="8"] {
  font-size: clamp(10px, 1.55cqw, 13px);
}

.north-aspect-label.edge-column {
  max-width: 5.8cqw;
  white-space: pre-line;
  text-align: center;
  line-height: 1.08;
  overflow: hidden;
}

.north-aspect-label.edge-row {
  max-width: 17cqw;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  overflow: hidden;
}

.north-aspect-label.compact-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  align-items: center;
  gap: 1px 4px;
  max-width: 13cqw;
  white-space: normal;
  line-height: 1;
  overflow: visible;
}

.north-aspect-label.left-edge-column {
  transform: translate(-50%, -50%);
}

.north-aspect-label.right-edge-column {
  transform: translate(-50%, -50%);
}

.north-aspect-label.top-edge-row {
  transform: translate(-50%, -50%);
}

.north-aspect-label.bottom-edge-row {
  transform: translate(-50%, -50%);
}

.north-aspect-label.bottom {
  max-width: 15cqw;
  white-space: nowrap;
}

.north-graha {
  position: absolute;
  width: min(28%, 19cqw);
  transform: translate(-50%, -50%);
}

.house-menu {
  position: absolute;
  z-index: 120;
  display: none;
  gap: 0;
  box-sizing: border-box;
  pointer-events: none;
  min-width: clamp(240px, 18vw, 272px);
  max-width: min(292px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--chart-arudha-color) 18%, var(--line));
  border-radius: 15px;
  background: rgba(255, 253, 248, .985);
  box-shadow: 0 18px 44px rgba(35, 43, 38, .16), 0 2px 8px rgba(35, 43, 38, .06);
  backdrop-filter: blur(16px);
}

.house-menu.open {
  display: grid;
  z-index: 10010;
  pointer-events: auto;
}

.house-menu[popover] {
  position: fixed;
  inset: auto;
  margin: 0;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}

.house-menu button[hidden] {
  display: none;
}

/* Expand inside the scrollable menu, never underneath the adjacent chart. */
.house-menu .special-points-submenu {
  position: static;
  width: 100%;
  box-sizing: border-box;
}

.house-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  padding: 9px 12px;
  background: transparent;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 540;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.house-menu button:hover,
.house-menu button:focus-visible {
  background: color-mix(in srgb, var(--chart-arudha-color) 7%, var(--paper));
  color: color-mix(in srgb, var(--chart-arudha-color) 82%, var(--ink));
}

.house-menu button.active {
  background: color-mix(in srgb, var(--chart-arudha-color) 11%, var(--paper));
  color: color-mix(in srgb, var(--chart-arudha-color) 90%, var(--ink));
  font-weight: 680;
  box-shadow: inset 3px 0 0 var(--chart-arudha-color);
}

.house-menu button:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: .58;
}

.house-menu-primary,
.house-menu-footer {
  display: grid;
  gap: 1px;
}

.house-menu-footer {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.house-menu-footer button {
  color: var(--muted);
}

.chart-viewer:has(.house-menu.open),
.chart-panel:has(.house-menu.open),
.chart-fit-container:has(.house-menu.open),
.chart-stage:has(.house-menu.open),
.chart-widget-body:has(.house-menu.open),
.today-transit-slot:has(.house-menu.open),
.workspace-row-shell:has(.house-menu.open),
.workspace-row:has(.house-menu.open),
.workspace-widget:has(.house-menu.open),
.workspace-widget-body:has(.house-menu.open) {
  overflow: visible !important;
}

.workspace-row-shell:has(.house-menu.open),
.workspace-row:has(.house-menu.open),
.workspace-widget:has(.house-menu.open) {
  position: relative;
  z-index: 10000;
}

.account-app:has(.house-menu.open) .account-main {
  position: relative;
  z-index: 10000;
  overflow: visible !important;
}

.workspace-widget:has(.house-menu.open) .workspace-chart-widget-header {
  z-index: 1;
}

.workspace-widget:has(.house-menu.open) .workspace-widget-body,
.workspace-widget:has(.house-menu.open) .chart-fit-container,
.workspace-widget:has(.house-menu.open) .chart-stage {
  position: relative;
  z-index: 2;
}

.workspace-widget:has(.house-menu.open) .chart-stage {
  isolation: auto;
}

.house-menu .special-points-submenu {
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--chart-arudha-color) 16%, var(--line));
  border-radius: 12px;
  background: rgba(255, 253, 248, .99);
  box-shadow: 0 16px 36px rgba(35, 43, 38, .14);
}

.arudha-inspector-surface {
  position: fixed;
  z-index: 118;
  inset: 0;
  display: grid;
  justify-items: end;
  min-width: 0;
}

.arudha-inspector-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(16, 24, 25, .28);
  backdrop-filter: blur(1px);
}

.arudha-inspector-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(520px, calc(100vw - 24px));
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--vs-account-line, var(--line));
  outline: none;
  background: var(--vs-account-surface-solid, var(--paper));
  box-shadow: -18px 0 52px rgba(16, 24, 25, .18);
}

.arudha-inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--vs-account-line, var(--line));
}

.arudha-inspector-header > div {
  min-width: 0;
}

.arudha-inspector-header span {
  display: block;
  overflow: hidden;
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arudha-inspector-header h2 {
  margin: 2px 0 0;
  font-size: 1rem;
  line-height: 1.25;
}

.arudha-inspector-header button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--vs-account-line, var(--line));
  border-radius: 50%;
  background: transparent;
  color: var(--vs-account-ink, var(--ink));
  font-size: 1.2rem;
  cursor: pointer;
}

.arudha-inspector-content {
  min-width: 0;
  min-height: 0;
  padding: 12px 16px 24px;
  overflow: auto;
  overscroll-behavior: contain;
}

.arudha-inspector-content :is(table, dl) {
  width: 100%;
  margin: 0;
}

.arudha-inspector-content table {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: .7rem;
}

.arudha-inspector-content :is(th, td) {
  min-width: 0;
  padding: 7px 5px;
  border-bottom: 1px solid var(--vs-account-line, var(--line));
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.arudha-inspector-content dl > div {
  display: grid;
  grid-template-columns: minmax(108px, .8fr) minmax(0, 1.2fr);
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--vs-account-line, var(--line));
}

.arudha-inspector-content :is(dt, dd) {
  margin: 0;
  font-size: .72rem;
}

.arudha-inspector-content dt {
  color: var(--vs-account-muted, var(--ink-soft));
}

.arudha-result-detail {
  margin-bottom: 18px;
}

.arudha-result-detail h3 {
  margin: 0 0 8px;
  color: var(--vs-account-ink, var(--ink));
  font: 700 1rem/1.3 var(--font-sans, sans-serif);
}

.arudha-result-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}

.arudha-result-table {
  min-width: 860px;
}

.arudha-result-table thead th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--vs-account-surface-solid, var(--paper));
}

.arudha-result-table tr[data-arudha-selected="true"] {
  background: color-mix(in srgb, var(--chart-arudha-color) 9%, transparent);
}

.arudha-table-code {
  min-width: 34px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--chart-arudha-color) 28%, transparent);
  border-radius: 6px;
  background: transparent;
  color: var(--chart-arudha-color);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.arudha-table-code:hover,
.arudha-table-code:focus-visible {
  background: color-mix(in srgb, var(--chart-arudha-color) 10%, transparent);
  outline: none;
}

.arudha-methodology-link {
  margin: 14px 0 0;
  font-size: .72rem;
}

.arudha-methodology-link a {
  color: var(--chart-arudha-color);
  text-underline-offset: 3px;
}

.arudha-technical-warning {
  margin-top: 12px;
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .72rem;
}

.arudhas-widget .workspace-widget-body {
  min-width: 0;
  overflow: hidden;
}

.arudhas-widget .arudha-result-table-wrap {
  max-height: 430px;
}

@media (max-width: 760px) {
  .arudha-inspector-surface {
    align-items: end;
    justify-items: stretch;
    padding: 8px 8px calc(74px + env(safe-area-inset-bottom));
  }

  .arudha-inspector-backdrop {
    background: rgba(16, 24, 25, .46);
    backdrop-filter: blur(2px);
  }

  .arudha-inspector-panel {
    width: 100%;
    height: auto;
    max-height: min(78svh, 720px);
    border: 1px solid var(--vs-account-line, var(--line));
    border-radius: 18px;
    box-shadow: 0 -18px 52px rgba(16, 24, 25, .22);
  }

  .arudha-inspector-content {
    padding-inline: 12px;
  }

  .arudha-inspector-content table {
    font-size: .64rem;
  }
}


.brahmasthana {
  width: min(76%, 40cqw);
  position: relative;
  z-index: 60;
  display: grid;
  justify-items: center;
  gap: 0;
  padding: clamp(8px, 1.4cqw, 12px);
  text-align: center;
  color: var(--ink);
  max-width: 100%;
  pointer-events: none;
}

.chart-code {
  max-width: 100%;
  overflow: hidden;
  color: rgba(33, 29, 24, .38);
  font-family: Literata, Georgia, serif;
  font-size: clamp(14px, calc(2.2cqw + 1px), 17px);
  font-weight: 520;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(15px, 2.95cqw, 21px);
  line-height: 1.1;
  font-weight: 520;
  white-space: nowrap;
}

.chart-meta {
  display: grid;
  gap: 3px;
  color: var(--muted);
  max-width: 100%;
  font-size: clamp(10px, 1.9cqw, 13px);
  line-height: 1.2;
}

.chart-meta span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-select {
  width: min(100%, 26cqw);
  height: clamp(30px, 5cqw, 34px);
  padding: 0 clamp(25px, 4.4cqw, 30px) 0 clamp(10px, 1.8cqw, 12px);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .66);
  color: var(--ink);
  text-align: center;
  outline: none;
  appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - clamp(16px, 2.5cqw, 17px)) 50%,
    calc(100% - clamp(11px, 1.8cqw, 12px)) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  pointer-events: auto;
}

.tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.05cqw, 7px);
}

.icon-button {
  width: clamp(30px, 5cqw, 34px);
  height: clamp(30px, 5cqw, 34px);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.icon-button:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, .82);
  transform: translateY(-1px);
}

.icon-button.active {
  border-color: rgba(201, 121, 47, .48);
  background: var(--accent-soft);
  color: var(--accent);
}

.icon-button svg {
  width: clamp(15px, 2.65cqw, 18px);
  height: clamp(15px, 2.65cqw, 18px);
  stroke: currentColor;
  stroke-width: 1.65;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.graha {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(5px, 1.05cqw, 7px);
  max-width: calc(100% - clamp(12px, 2.6cqw, 18px));
  font-size: clamp(10px, 2.2cqw, 15px);
  line-height: 1;
  font-weight: 560;
  color: var(--ink);
  z-index: 3;
}

.graha.auto {
  inset: 50% auto auto 50%;
  width: min(82%, 16.2cqw);
  transform: translate(-50%, -50%);
}

.graha.auto,
.north-chart .graha[data-count] {
  display: grid;
  grid-template-columns: repeat(var(--graha-cols, 2), minmax(0, 1fr));
  justify-items: center;
  align-items: center;
  gap: var(--graha-gap, 7px);
}

.north-chart .graha[data-count] {
  width: min(34%, 17.4cqw);
  max-width: 34%;
}

.north-chart .north-graha[data-count] {
  width: min(24%, 16cqw);
  max-width: 24%;
}

.north-chart .north-graha[data-house="2"],
.north-chart .north-graha[data-house="6"],
.north-chart .north-graha[data-house="8"],
.north-chart .north-graha[data-house="12"] {
  width: min(22%, 15cqw);
  max-width: 22%;
}

.north-chart .north-graha[data-house="3"],
.north-chart .north-graha[data-house="5"],
.north-chart .north-graha[data-house="9"],
.north-chart .north-graha[data-house="11"] {
  width: min(18%, 13cqw);
  max-width: 18%;
}

.north-chart .graha[data-count="1"],
.north-chart .graha[data-count="2"] {
  --planet-name-size: clamp(18px, calc(3.2cqw + 1.2px), 24px);
  --planet-degree-size: clamp(8px, calc(1.4cqw + .9px), 11px);
}

.north-side-planet {
  position: absolute;
  transform: translate(-50%, -50%);
  --planet-name-size: clamp(15px, calc(2.55cqw + 1.2px), 20px);
  --planet-degree-size: clamp(7px, calc(1.2cqw + .9px), 10px);
  z-index: 2;
}

.north-side-planet[data-count="1"],
.north-side-planet[data-count="2"] {
  --planet-name-size: clamp(16px, calc(3cqw + 1.2px), 23px);
  --planet-degree-size: clamp(8px, calc(1.35cqw + .9px), 11px);
}

.north-side-planet[data-count="4"] {
  --planet-name-size: clamp(12px, calc(1.95cqw + .9px), 16px);
  --planet-degree-size: clamp(7px, calc(1.15cqw + .9px), 9px);
}

.north-side-planet[data-count="5"],
.north-side-planet[data-count="6"],
.north-side-planet[data-count="7"],
.north-side-planet[data-count="8"] {
  --planet-name-size: clamp(9px, calc(1.55cqw + .9px), 12px);
  --planet-degree-size: clamp(6px, calc(1cqw + .9px), 8px);
}

/* North charts use one measured item per primary object. Coordinates are only
   preferred starting points; chart-viewer.js keeps the final bounding box in
   the safe polygon of its house and reserves the sign number as an obstacle. */
.north-house-planet {
  position: absolute;
  z-index: 6;
  max-width: min(14%, 10cqw);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  --planet-name-size: clamp(16px, calc(2.75cqw + 1px), 22px);
  --planet-degree-size: clamp(8px, calc(1.35cqw + .8px), 11px);
}

.north-house-planet[data-house-density="compact"] {
  --planet-name-size: clamp(13px, calc(2.15cqw + .8px), 18px);
  --planet-degree-size: clamp(7px, calc(1.18cqw + .7px), 10px);
}

.north-house-planet[data-house-density="dense"] {
  --planet-name-size: clamp(10px, calc(1.7cqw + .8px), 14px);
  --planet-degree-size: clamp(6px, calc(1cqw + .7px), 8px);
  gap: 1px;
}

.north-house-planet[data-house-density="dense"] .planet-karaka {
  --planet-karaka-size: clamp(5px, calc(.82cqw + .2px), 7px);
}

.north-chart :is(
  .chart-special-point-row-north,
  .north-arudha-group,
  .transit-graha-row-north,
  .north-aspect-label
)[data-house-density="compact"] {
  max-width: min(16%, 12cqw);
  line-height: 1.05;
}

.north-chart :is(
  .chart-special-point-row-north,
  .north-arudha-group,
  .transit-graha-row-north,
  .north-aspect-label
)[data-house-density="dense"] {
  max-width: min(13%, 10cqw);
  gap: 1px 2px;
  font-size: clamp(7px, 1.15cqw, 10px);
  line-height: 1;
}

.transit-graha-row-north[data-house-density="compact"] .transit-planet-name {
  font-size: clamp(10px, 1.7cqw, 13px);
}

.transit-graha-row-north[data-house-density="compact"] .transit-planet-degree {
  font-size: clamp(7px, 1.05cqw, 9px);
}

.transit-graha-row-north[data-house-density="dense"] .transit-planet-name {
  font-size: clamp(8px, 1.35cqw, 11px);
}

.transit-graha-row-north[data-house-density="dense"] .transit-planet-degree {
  font-size: clamp(6px, .9cqw, 8px);
}

.graha[data-count="1"] {
  --graha-cols: 1;
  --graha-gap: clamp(6px, 1.05cqw, 7px);
  --planet-name-size: clamp(20px, calc(3.75cqw + 1.2px), 26px);
  --planet-degree-size: clamp(9px, calc(1.58cqw + .9px), 12px);
}

.graha[data-count="2"] {
  --graha-cols: 2;
  --graha-gap: clamp(6px, 1.05cqw, 7px);
  --planet-name-size: clamp(20px, calc(3.75cqw + 1.2px), 26px);
  --planet-degree-size: clamp(9px, calc(1.58cqw + .9px), 12px);
}

.graha[data-count="3"] {
  --graha-cols: 3;
  --planet-name-size: clamp(18px, calc(3.35cqw + 1.2px), 24px);
  --planet-degree-size: clamp(8px, calc(1.45cqw + .9px), 11px);
}

.graha.auto[data-count="3"] {
  --graha-gap: clamp(7px, 1.2cqw, 9px);
  width: min(90%, 19cqw);
}

.graha[data-count="4"] {
  --graha-cols: 2;
  --graha-gap: clamp(7px, 1.1cqw, 9px);
  --planet-name-size: clamp(16px, calc(2.95cqw + 1px), 21px);
  --planet-degree-size: clamp(8px, calc(1.45cqw + .9px), 11px);
}

.graha.auto[data-count="4"] {
  width: min(88%, 18cqw);
}

.graha[data-count="5"],
.graha[data-count="6"] {
  --graha-cols: 3;
  --graha-gap: clamp(4px, .75cqw, 5px);
  --planet-name-size: clamp(11px, calc(2cqw + .9px), 14px);
  --planet-degree-size: clamp(7px, calc(1.3cqw + .9px), 10px);
}

.graha[data-count="7"],
.graha[data-count="8"] {
  --graha-cols: 4;
  --graha-gap: clamp(3px, .6cqw, 4px);
  --planet-name-size: clamp(10px, calc(1.7cqw + .9px), 13px);
  --planet-degree-size: clamp(6px, calc(1.12cqw + .9px), 9px);
}

.graha.top {
  top: clamp(8px, 1.75cqw, 12px);
  left: clamp(8px, 1.75cqw, 12px);
}

.graha.bottom {
  right: clamp(8px, 1.75cqw, 12px);
  bottom: clamp(8px, 1.75cqw, 12px);
  justify-content: flex-end;
}

.graha span {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.planet {
  display: inline-grid;
  justify-items: center;
  gap: clamp(1px, .3cqw, 2px);
  min-width: 0;
  font-size: var(--planet-degree-size, clamp(10px, calc(1.75cqw + 1px), 13px));
}

.planet-heading {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1px, .28cqw, 2px);
  min-width: 0;
  line-height: 1;
}

.planet-name {
  font-size: var(--planet-name-size, clamp(14px, calc(2.65cqw + .9px), 19px));
  line-height: 1;
  font-weight: 650;
}

.planet.retro .planet-name {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.planet.retro .planet-degree {
  margin-top: clamp(2px, .4cqw, 3px);
}

.planet-degree {
  color: color-mix(in srgb, currentColor 92%, var(--ink));
  font-size: 120%;
  line-height: 1;
  font-weight: 520;
}

.planet-karaka {
  color: color-mix(in srgb, currentColor 72%, var(--ink));
  font-size: var(--planet-karaka-size, clamp(6px, calc(1.05cqw + .35px), 9px));
  line-height: 1;
  font-weight: 760;
  letter-spacing: .015em;
  white-space: nowrap;
  transform: translateY(-.08em);
}

.graha[data-count="5"] .planet-karaka,
.graha[data-count="6"] .planet-karaka,
.graha[data-count="7"] .planet-karaka,
.graha[data-count="8"] .planet-karaka,
.north-side-planet[data-count="5"] .planet-karaka,
.north-side-planet[data-count="6"] .planet-karaka,
.north-side-planet[data-count="7"] .planet-karaka,
.north-side-planet[data-count="8"] .planet-karaka {
  --planet-karaka-size: clamp(5px, calc(.82cqw + .2px), 7px);
}

.planet[data-graha="Sa"] { color: #2156b3; }
.planet[data-graha="Ma"] { color: #c3372f; }
.planet[data-graha="Me"] { color: #087a46; }
.planet[data-graha="Mo"] { color: #3f6075; }
.planet[data-graha="Ve"] { color: #7a3fa3; }
.planet[data-graha="Su"] { color: #a85b00; }
.planet[data-graha="Ju"] { color: #b74b0b; }
.planet[data-graha="Ra"] { color: #70412f; }
.planet[data-graha="Ke"] { color: #171715; }

.sign {
  position: absolute;
  right: clamp(7px, 1.45cqw, 10px);
  top: clamp(7px, 1.35cqw, 9px);
  color: rgba(33, 29, 24, .36);
  font-size: clamp(11px, calc(1.9cqw + 1px), 14px);
  font-weight: 500;
  line-height: 1;
}

.lagna {
  color: #9e5516;
}

@container (max-width: 1739px) {
  .charts-row {
    grid-template-columns: minmax(620px, 1fr) minmax(620px, 1fr);
  }

  .charts-row > .periods-panel:not(.varshaphala-widget-varshaphala-periods) {
    grid-column: 1 / -1;
  }
}

@container (max-width: 1259px) {
  .charts-row {
    grid-template-columns: 1fr;
  }

  .chart-viewer,
  .chart-panel {
    min-width: 0;
  }
}

@media (max-width: 1180px) {
  .account-sidebar-toggle[aria-expanded="false"] .account-sidebar-toggle-icon--close {
    display: none;
  }

  .account-sidebar-toggle[aria-expanded="false"] .account-sidebar-toggle-icon--open {
    display: block;
  }

  .account-sidebar-toggle[aria-expanded="true"] .account-sidebar-toggle-icon--close {
    display: block;
  }

  .account-sidebar-toggle[aria-expanded="true"] .account-sidebar-toggle-icon--open {
    display: none;
  }

  .account-layout {
    grid-template-columns: 1fr;
  }

  .account-sidebar {
    display: none;
  }

  .account-main {
    padding: 18px 16px 88px;
  }

  .charts-row {
    grid-template-columns: 1fr;
  }

  .chart-viewer,
  .chart-panel {
    min-width: 0;
  }

  .account-mobile-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--vs-account-line);
    border-radius: 999px;
    background: rgba(255, 252, 245, .92);
    box-shadow: 0 18px 44px rgba(20, 32, 30, .12);
    backdrop-filter: blur(14px);
  }

  .account-mobile-nav a,
  .account-mobile-nav button {
    display: grid;
    place-items: center;
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--vs-account-muted);
    font-size: .74rem;
    font-weight: 800;
  }

  .account-mobile-nav a.active,
  .account-mobile-nav a[aria-current="page"] {
    background: color-mix(in srgb, var(--vs-account-surface-solid) 90%, var(--vs-account-accent));
    color: var(--vs-account-ink);
  }

  .account-mobile-nav button[data-mobile-primary-nav="new"] {
    background: color-mix(in srgb, var(--vs-account-surface-solid) 84%, var(--vs-account-gold));
    color: var(--vs-account-ink);
  }
}

@media (max-width: 760px) {
  .account-app {
    --account-topbar-height: 56px;
  }

  .account-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    height: var(--account-topbar-height);
    padding: 0 12px;
  }

  .account-brand img {
    width: 118px;
  }

  .account-search,
  .account-icon-button[data-help-shortcut],
  .account-icon-button[data-toast-action] {
    display: none;
  }

  .account-profile-button {
    min-height: 32px;
    padding-inline: 10px;
  }

  .account-main {
    padding: 14px 10px 86px;
  }

  .account-page-heading-row,
  .workspace-heading,
  .today-hero,
  .charts-tools,
  .settings-list div {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .account-page-heading h1 {
    font-size: 1.38rem;
  }

  .favorite-strip {
    margin-inline: -10px;
    padding-inline: 10px;
  }

  .chart-viewer > .chart-panel {
    padding: 10px;
  }

  .chart-toolbar {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
  }

  .chart-info {
    width: 100%;
    text-align: center;
  }

  .chart-controls {
    width: 100%;
  }

  .chart-stage {
    width: min(100%, 680px);
  }

  .new-chart-options {
    grid-template-columns: 1fr;
  }

  .modal-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: min(88svh, 760px);
    margin: 0;
    border-radius: 18px 18px 0 0;
  }

  .toast-region {
    left: 12px;
    right: 12px;
    bottom: 76px;
  }
}

/* Quick chart calculation and active chart metadata ---------------------- */
.workspace-page {
  gap: 4px;
}

.workspace-compact-header[data-active-chart-header] {
  min-height: 36px;
  padding: 0 2px;
}

.workspace-active-chart-summary {
  display: flex;
  align-items: baseline;
  gap: 5px 10px;
  min-width: 0;
}

.workspace-active-chart-summary > strong {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--vs-account-ink);
  font-family: Literata, Georgia, serif;
  font-size: .91rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-active-chart-summary .workspace-context {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-header-actions {
  gap: 5px;
}

.workspace-header-actions :is(.workspace-draft-save, .workspace-chart-edit),
.workspace-mobile-chart-actions button {
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
  background: var(--workspace-surface, #fffdfa);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
}

.workspace-header-actions .workspace-draft-save {
  border-color: color-mix(in srgb, var(--vs-account-gold, #a48142) 62%, var(--vs-account-line));
  background: color-mix(in srgb, var(--workspace-surface, #fffdfa) 82%, var(--vs-account-gold, #a48142));
}

.workspace-header-actions .workspace-sheet-settings-trigger {
  min-height: 30px;
  padding: 4px 8px;
  font-size: .7rem;
}

.workspace-header-actions [data-chart-edit-state] {
  max-width: 168px;
  overflow: hidden;
  color: var(--vs-account-muted);
  text-overflow: ellipsis;
}

.workspace-mobile-chart-actions {
  display: none;
}

.quick-chart-entry {
  position: relative;
  z-index: 25;
  display: grid;
  grid-template-columns: minmax(106px, .75fr) minmax(140px, 1.25fr) minmax(112px, .9fr) minmax(100px, .8fr) minmax(178px, 1.55fr) auto;
  align-items: start;
  gap: 5px;
  min-width: 0;
  min-height: 45px;
  padding: 3px 4px 2px;
  border-bottom: 1px solid var(--vs-account-line);
  background: var(--vs-account-bg, #f5f2ea);
}

.quick-chart-field {
  position: relative;
  display: block;
  min-width: 0;
}

.quick-chart-field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.quick-chart-entry :is(input, select) {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
  background: var(--workspace-surface, #fffdfa);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .72rem;
  outline: none;
}

.quick-chart-entry :is(input, select):focus {
  border-color: var(--vs-account-gold, #a48142);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vs-account-gold, #a48142) 16%, transparent);
}

.quick-chart-location {
  position: relative;
  min-width: 0;
}

.quick-chart-location > small {
  display: block;
  max-width: 100%;
  margin: 1px 2px 0;
  overflow: hidden;
  color: var(--vs-account-muted);
  font-size: .57rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-chart-location-results {
  position: absolute;
  z-index: 120;
  top: 36px;
  inset-inline: 0;
  display: grid;
  max-height: 230px;
  padding: 3px;
  overflow: auto;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  background: var(--workspace-surface, #fffdfa);
  box-shadow: 0 14px 34px rgba(16, 24, 25, .18);
}

.quick-chart-location-results[hidden] {
  display: none;
}

.quick-chart-location-results button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  min-height: 34px;
  padding: 5px 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .68rem;
  text-align: left;
  cursor: pointer;
}

.quick-chart-location-results button:hover,
.quick-chart-location-results button:focus-visible {
  background: color-mix(in srgb, var(--workspace-surface, #fffdfa) 82%, var(--vs-account-gold, #a48142));
}

.quick-chart-location-results button small {
  color: var(--vs-account-muted);
  font-size: .58rem;
}

.quick-chart-actions {
  display: grid;
  grid-template-columns: auto 28px;
  gap: 4px;
}

.quick-chart-calculate,
.quick-chart-extended {
  height: 34px;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}

.quick-chart-calculate {
  padding: 0 11px;
  border-color: var(--vs-account-accent, var(--teal));
  background: var(--vs-account-accent, var(--teal));
  color: var(--ivory);
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}

.quick-chart-calculate:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.quick-chart-extended {
  width: 28px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: transparent;
  font-size: 0;
}

.quick-chart-extended::after {
  color: var(--vs-account-ink);
  content: "⋯";
  font-size: 1rem;
}

.quick-chart-message,
.quick-chart-subscription {
  position: absolute;
  top: 39px;
  right: 6px;
  max-width: 52%;
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .57rem;
  line-height: 1;
  text-align: right;
}

.quick-chart-message[data-state="error"],
.quick-chart-subscription {
  color: #9b3f35;
}

.quick-chart-entry[data-busy="true"] .quick-chart-calculate {
  cursor: progress;
}

.new-chart-form .extended-chart-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: min(440px, 100%);
  margin-inline: auto;
}

.new-chart-form .extended-chart-fields > * {
  min-width: 0;
  grid-column: 1;
}

.new-chart-form .chart-datetime-row {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: start;
  gap: 10px;
  min-width: 0;
}

.new-chart-form .segmented-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.new-chart-form .segmented-field legend {
  margin: 0 0 7px;
  color: var(--vs-account-text);
  font-size: .86rem;
  font-weight: 650;
}

.new-chart-form .segmented-control {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--vs-account-accent) 18%, var(--vs-account-line-strong));
  border-radius: 12px;
  background: var(--vs-account-surface);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.new-chart-form .segmented-control:focus-within {
  border-color: var(--vs-account-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-account-accent) 15%, transparent);
}

.new-chart-form .segmented-control input {
  width: 2.35ch;
  min-width: 2.35ch;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  caret-color: transparent;
}

.new-chart-form .segmented-control input[data-segment-part="year"] {
  width: 4.55ch;
  min-width: 4.55ch;
}

.new-chart-form .segmented-control input:focus {
  background: color-mix(in srgb, var(--vs-account-accent) 12%, transparent);
}

.new-chart-form .extended-chart-fields :is(input:not([type="hidden"]), select) {
  border-color: color-mix(in srgb, var(--vs-account-accent) 18%, var(--vs-account-line-strong));
  background: var(--vs-account-surface, var(--paper));
}

.new-chart-form .extended-chart-fields :is(input:not([type="hidden"]), select):hover {
  border-color: color-mix(in srgb, var(--vs-account-accent) 36%, var(--vs-account-line-strong));
}

.new-chart-form .extended-chart-fields :is(input:not([type="hidden"]), select):focus-visible {
  border-color: color-mix(in srgb, var(--vs-account-accent) 72%, var(--vs-account-line-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-account-accent) 14%, transparent);
}

.new-chart-form .chart-full-form {
  padding-top: 2px;
}

.new-chart-form .chart-full-form summary {
  width: fit-content;
  color: var(--vs-account-muted);
  cursor: pointer;
  font-size: .76rem;
  font-weight: 500;
}

.new-chart-form .chart-full-form[open] summary {
  margin-bottom: 10px;
}

.new-chart-form .chart-full-form > label {
  display: grid;
  gap: 7px;
}

.new-chart-form .chart-field-hint {
  color: var(--vs-account-muted);
  font-size: .66rem;
  font-weight: 500;
  line-height: 1.3;
}

.new-chart-form .chart-form-warning,
.new-chart-form .chart-form-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .72rem;
}

.new-chart-form .chart-form-warning {
  padding: 8px 10px;
  border-left: 3px solid var(--vs-account-gold, #a48142);
  background: color-mix(in srgb, var(--workspace-surface, #fffdfa) 82%, var(--vs-account-gold, #a48142));
}

@media (max-width: 1180px) and (min-width: 761px) {
  .workspace-header-actions .account-save-state {
    display: none;
  }

  .quick-chart-entry {
    grid-template-columns: 104px minmax(118px, 1.1fr) 108px 98px minmax(155px, 1.35fr) auto;
  }

  .quick-chart-calculate {
    max-width: 116px;
    white-space: normal;
    line-height: 1.05;
  }
}

@media (max-width: 760px) {
  .workspace-compact-header[data-active-chart-header] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
    min-height: 70px;
    padding: 4px 0;
  }

  .workspace-active-chart-summary {
    display: grid;
    gap: 2px;
  }

  .workspace-active-chart-summary .workspace-context {
    font-size: .66rem;
  }

  .workspace-header-actions {
    display: none;
  }

  .workspace-mobile-chart-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .workspace-mobile-chart-actions button {
    min-height: 38px;
  }

  .workspace-mobile-chart-actions .workspace-mobile-draft-save,
  .workspace-mobile-chart-subscription {
    grid-column: 1 / -1;
  }

  .workspace-mobile-chart-actions .workspace-mobile-draft-save {
    border-color: color-mix(in srgb, var(--vs-account-gold, #a48142) 62%, var(--vs-account-line));
    background: color-mix(in srgb, var(--workspace-surface, #fffdfa) 82%, var(--vs-account-gold, #a48142));
  }

  .workspace-mobile-chart-subscription {
    color: #9b3f35;
    font-size: .66rem;
    line-height: 1.25;
  }

  .quick-chart-entry {
    display: none;
  }

  .new-chart-modal .modal-panel {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    max-height: min(91svh, 820px);
    margin: 0;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -22px 58px rgba(16, 24, 25, .28);
  }

  .new-chart-form .extended-chart-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .new-chart-form .extended-chart-fields > :is(.full-width, .local-location-fields) {
    grid-column: 1;
  }

  .new-chart-modal .modal-actions > button {
    min-height: 42px;
  }
}

/* Workspace v2 ----------------------------------------------------------- */

.current-workspace {
  position: relative;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.workspace-local-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--vs-account-line);
  scrollbar-width: thin;
  scrollbar-color: rgba(197, 148, 79, .34) transparent;
}

.workspace-local-nav button {
  position: relative;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px 9px 0 0;
  background: transparent;
  color: var(--vs-account-muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.workspace-local-nav button::after {
  content: "";
  position: absolute;
  right: 11px;
  bottom: -1px;
  left: 11px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
}

.workspace-local-nav button:hover {
  background: rgba(197, 148, 79, .07);
  color: var(--vs-account-ink);
}

.workspace-local-nav button[aria-selected="true"] {
  background: rgba(197, 148, 79, .09);
  color: var(--vs-account-ink);
}

.workspace-local-nav button[aria-selected="true"]::after {
  background: var(--vs-account-accent);
}

.workspace-local-nav button:focus-visible,
.workspace-view-heading button:focus-visible,
.workspace-widget button:focus-visible,
.workspace-widget select:focus-visible,
.row-popover button:focus-visible,
.gallery-controls button:focus-visible,
.gallery-controls input:focus-visible,
.gallery-controls select:focus-visible,
.varga-card button:focus-visible,
.yoga-card button:focus-visible,
.widget-drawer button:focus-visible,
.mobile-action-sheet button:focus-visible {
  outline: 2px solid var(--vs-account-accent);
  outline-offset: 2px;
}

.workspace-local-view {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.workspace-view-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.workspace-view-heading h2 {
  margin: 0;
  color: var(--vs-account-ink);
  font-family: Literata, Georgia, serif;
  font-size: clamp(1.14rem, 1.6vw, 1.42rem);
  font-weight: 600;
  line-height: 1.15;
}

.workspace-view-heading p {
  margin: 4px 0 0;
  color: var(--vs-account-muted);
  font-size: .82rem;
}

.workspace-main-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.workspace-rows {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.workspace-row {
  --row-columns: 3;
  display: grid;
  grid-template-columns: repeat(var(--row-columns), minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.workspace-widget {
  --widget-span: 1;
  grid-column: span var(--widget-span);
  min-width: 0;
}

/* Planet Strength v1 ----------------------------------------------------- */
.planet-strength-panel { container-type: inline-size; }

.planet-strength-panel > .workspace-widget-body {
  padding: 0;
  min-height: 430px;
  overflow: visible;
}

.planet-strength-overview {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
  scrollbar-gutter: auto;
}

.planet-strength-detail {
  max-height: min(72vh, 690px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-gutter: stable;
}

.planet-strength-overview { padding: 4px 14px 16px; }

.planet-strength-row {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 40px minmax(150px, 1fr) minmax(92px, auto) minmax(140px, .8fr) minmax(160px, 1fr);
  align-items: center;
  gap: 8px 12px;
  padding: 10px 8px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d7d5cb) 72%, transparent);
  border-radius: 0;
  color: var(--ink, #1d2c27);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.planet-strength-row:hover,
.planet-strength-row:focus-visible { background: color-mix(in srgb, var(--surface-soft, #f1f0e9) 75%, transparent); }
.planet-strength-row:focus-visible { outline: 2px solid var(--accent, #c4782d); outline-offset: -2px; }

.planet-strength-graha {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 11%, transparent);
  font-weight: 760;
  letter-spacing: .02em;
}
.planet-strength-graha--su { color: var(--vs-graha-accent-su); }
.planet-strength-graha--mo { color: var(--vs-graha-accent-mo); }
.planet-strength-graha--ma { color: var(--vs-graha-accent-ma); }
.planet-strength-graha--me { color: var(--vs-graha-accent-me); }
.planet-strength-graha--ju { color: var(--vs-graha-accent-ju); }
.planet-strength-graha--ve { color: var(--vs-graha-accent-ve); }
.planet-strength-graha--sa { color: var(--vs-graha-accent-sa); }

.planet-strength-row-main { display: grid; gap: 8px; min-width: 0; }
.planet-strength-name { font-weight: 700; }
.planet-strength-bar {
  position: relative;
  height: 6px;
  overflow: visible;
  border-radius: 99px;
  background: var(--strength-track);
}
.planet-strength-bar-fill {
  display: block;
  width: var(--planet-strength-fill);
  height: 100%;
  border-radius: inherit;
  background: var(--strength-fill);
}
.planet-strength-bar i {
  position: absolute;
  left: 50%;
  top: -3px;
  width: 1px;
  height: 12px;
  background: color-mix(in srgb, var(--ink, #1d2c27) 62%, transparent);
}
.planet-strength-percent { font-variant-numeric: tabular-nums; white-space: nowrap; }
.planet-strength-percent small { color: var(--muted, #69746f); font-weight: 500; }
.planet-strength-secondary { min-width: 0; display: grid; gap: 3px; color: var(--muted, #69746f); font-size: .78rem; white-space: normal; }
.planet-strength-secondary strong { color: var(--ink, #1d2c27); font-size: .78rem; }
.planet-strength-secondary small { color: inherit; font-size: .7rem; }
.planet-strength-ik-split {
  position: relative;
  width: 100%;
  min-width: 96px;
  height: 8px;
  display: flex;
  overflow: hidden;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink, #1d2c27) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink, #1d2c27) 8%, transparent);
}
.planet-strength-ik-split::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 1px;
  background: color-mix(in srgb, var(--ink, #1d2c27) 42%, transparent);
}
.planet-strength-ik-split-kashta,
.planet-strength-ik-split-ishta { display: block; height: 100%; }
.planet-strength-ik-split-kashta {
  width: var(--ik-kashta);
  background: var(--strength-kashta);
}
.planet-strength-ik-split-ishta {
  width: var(--ik-ishta);
  margin-left: auto;
  background: var(--strength-ishta);
}

.planet-strength-detail { padding: 4px 16px 20px; }
.planet-strength-detail-top {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.planet-strength-detail-top > button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--surface-soft, #f1f0e9);
  font-size: 1.2rem;
}
.planet-strength-detail-top > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.planet-strength-detail-top h3 { margin: 0; font-size: clamp(1.08rem, 2.2vw, 1.35rem); }
.planet-strength-detail-top > strong { font-size: 1.06rem; white-space: nowrap; }
.planet-strength-statuses { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px 52px; }
.planet-strength-statuses span {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-soft, #f1f0e9);
  color: var(--muted, #69746f);
  font-size: .72rem;
}
.planet-strength-synthesis {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-left: 3px solid color-mix(in srgb, var(--accent, #c4782d) 60%, transparent);
  background: color-mix(in srgb, var(--surface-soft, #f1f0e9) 68%, transparent);
  line-height: 1.5;
}
.planet-strength-indicators {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.planet-strength-indicators article {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line, #d7d5cb);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface, #fff) 90%, transparent);
}
.planet-strength-indicators span,
.planet-strength-indicators small { display: block; color: var(--muted, #69746f); font-size: .68rem; }
.planet-strength-indicators strong { display: block; margin: 4px 0; font-size: .94rem; font-variant-numeric: tabular-nums; }

.planet-strength-section { border-top: 1px solid var(--line, #d7d5cb); }
.planet-strength-section > summary { min-height: 46px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.planet-strength-section > summary::marker { color: var(--accent, #c4782d); }
.planet-strength-classic-total { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 12px; }
.planet-strength-classic-total span { color: var(--muted, #69746f); }
.planet-strength-components { margin: 0 0 14px; padding: 0; list-style: none; }
.planet-strength-components > li { padding: 7px 0; border-top: 1px dashed color-mix(in srgb, var(--line, #d7d5cb) 70%, transparent); }
.planet-strength-components li > div,
.planet-strength-components li li { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.planet-strength-components ul { margin: 6px 0 0 16px; padding: 0; color: var(--muted, #69746f); list-style: none; font-size: .8rem; }
.planet-strength-component-bar { display: block; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: var(--strength-track); }
.planet-strength-component-bar b { display: block; width: var(--component-fill); height: 100%; border-radius: inherit; background: var(--strength-fill); }

.planet-strength-ik { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 2px 0 14px; }
.planet-strength-ik > div { display: grid; grid-template-columns: auto minmax(70px, 1fr) auto; align-items: center; gap: 8px; }
.planet-strength-ik i { height: 7px; border-radius: 99px; background: linear-gradient(90deg, #bf6f2e var(--ik), color-mix(in srgb, var(--ink, #1d2c27) 10%, transparent) var(--ik)); }
.planet-strength-vimshopaka-select { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.planet-strength-vimshopaka-select select { min-height: 40px; min-width: 180px; }
.planet-strength-varga-scale { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); padding-top: 12px; margin-bottom: 12px; color: var(--muted, #69746f); font-size: .7rem; }
.planet-strength-varga-scale::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--ink, #1d2c27) 10%, transparent); }
.planet-strength-varga-scale i { position: absolute; top: 1px; left: var(--vimshopaka); width: 10px; height: 10px; border-radius: 50%; transform: translateX(-50%); background: var(--accent, #c4782d); }
.planet-strength-varga-scale span:last-child { text-align: right; }
.planet-strength-varga-table { overflow-x: auto; margin-bottom: 14px; }
.planet-strength-varga-table table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.planet-strength-varga-table th,
.planet-strength-varga-table td { padding: 7px 8px; border-bottom: 1px solid var(--line, #d7d5cb); text-align: left; white-space: nowrap; }
.planet-strength-avasthas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-bottom: 14px; }
.planet-strength-avasthas article { padding: 10px; border: 1px solid var(--line, #d7d5cb); border-radius: 10px; }
.planet-strength-avasthas span,
.planet-strength-avasthas strong,
.planet-strength-avasthas small { display: block; }
.planet-strength-avasthas span { color: var(--muted, #69746f); font-size: .7rem; text-transform: uppercase; }
.planet-strength-avasthas p { margin: 5px 0 0; color: var(--muted, #69746f); font-size: .76rem; }
.planet-strength-role { padding-bottom: 14px; }
.planet-strength-role p { margin: 6px 0; }
.planet-strength-role ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted, #69746f); }
.planet-strength-open-periods { min-height: 44px; margin-top: 8px; padding: 0 14px; border: 1px solid var(--line, #d7d5cb); border-radius: 10px; background: transparent; color: var(--ink, #1d2c27); font-weight: 650; }
.planet-strength-skeleton { display: grid; gap: 8px; padding: 12px 16px; }
.planet-strength-skeleton i { height: 56px; border-radius: 10px; background: linear-gradient(100deg, var(--surface-soft, #f1f0e9) 30%, #fff 50%, var(--surface-soft, #f1f0e9) 70%); background-size: 220% 100%; animation: planet-strength-shimmer 1.2s linear infinite; }
@keyframes planet-strength-shimmer { to { background-position-x: -220%; } }

@container (max-width: 700px) {
  .planet-strength-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 6px 9px; }
  .planet-strength-secondary { grid-column: 2 / span 1; }
  .planet-strength-secondary:last-child { grid-column: 3; grid-row: 2; }
  .planet-strength-ik-split { max-width: 240px; }
  .planet-strength-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planet-strength-avasthas { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .planet-strength-panel > .workspace-widget-body { min-height: 390px; }
  .planet-strength-overview { max-height: none; }
  .planet-strength-detail { max-height: min(68vh, 620px); }
  .planet-strength-overview { padding-inline: 8px; }
  .planet-strength-row { min-height: 72px; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 6px 9px; padding-inline: 6px; }
  .planet-strength-secondary { grid-column: 2; }
  .planet-strength-secondary:last-child { grid-column: 3; grid-row: 2; }
  .planet-strength-ik-split { max-width: 240px; }
  .planet-strength-detail { padding-inline: 12px; }
  .planet-strength-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planet-strength-detail-top > button,
  .planet-strength-open-periods { min-height: 44px; }
}

.workspace-row > .workspace-widget {
  grid-column: span var(--widget-span-x, 1) !important;
  grid-row: span var(--widget-span-y, 1) !important;
}

/* ChartViewer keeps its square geometry; only legacy minimums are relaxed. */
.workspace-row > .workspace-widget.chart-viewer,
.workspace-row > .chart-viewer,
.workspace-widget .chart-viewer,
.workspace-widget .chart-panel,
.workspace-widget.chart-viewer > .chart-panel {
  min-width: 0;
}

.workspace-row > .workspace-widget,
.workspace-row > .periods-panel:not(.varshaphala-widget-varshaphala-periods) {
  grid-column: span var(--widget-span, 1);
}

.workspace-row > .planet-table-panel,
.workspace-widget .planet-table-panel {
  margin-top: 0;
}

.workspace-placeholder,
.placeholder-widget,
.widget-placeholder,
.workspace-mock-widget,
.mock-widget,
.ashtakavarga-panel,
.ashtakavarga-widget,
.workspace-widget[data-widget-type="placeholder"],
.workspace-widget[data-widget-render="mock"],
.workspace-widget[data-widget-type="ashtakavarga"] {
  min-width: 0;
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  background: var(--vs-account-surface);
  box-shadow: var(--vs-account-shadow);
}

.workspace-placeholder,
.placeholder-widget,
.widget-placeholder,
.workspace-widget[data-widget-type="placeholder"] {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  min-height: 220px;
  padding: 22px;
  text-align: center;
}

.workspace-placeholder strong,
.placeholder-widget strong,
.widget-placeholder strong,
.workspace-widget[data-widget-type="placeholder"] strong {
  color: var(--vs-account-ink);
  font-size: .92rem;
}

.workspace-placeholder p,
.placeholder-widget p,
.widget-placeholder p,
.workspace-widget[data-widget-type="placeholder"] p {
  max-width: 28ch;
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .78rem;
}

.workspace-placeholder button,
.placeholder-widget button,
.widget-placeholder button,
.workspace-widget[data-widget-type="placeholder"] button,
[data-add-widget] {
  min-height: 40px;
  margin-top: 5px;
  padding: 0 15px;
  border: 1px solid rgba(197, 148, 79, .38);
  border-radius: 999px;
  background: rgba(197, 148, 79, .11);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
}

.workspace-mock-widget,
.mock-widget,
.workspace-widget[data-widget-render="mock"] {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 180px;
  padding: 18px;
}

.workspace-mock-widget h3,
.mock-widget h3,
.workspace-widget[data-widget-render="mock"] h3,
.workspace-mock-widget h2,
.mock-widget h2,
.workspace-widget[data-widget-render="mock"] h2 {
  margin: 0;
  font-family: Literata, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
}

.workspace-mock-widget p,
.mock-widget p,
.workspace-widget[data-widget-render="mock"] p {
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .8rem;
}

.workspace-mock-widget button,
.mock-widget button,
.workspace-widget[data-widget-render="mock"] button {
  justify-self: start;
}

.widget-eyebrow {
  color: var(--teal);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.placeholder-plus {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(197, 148, 79, .34);
  border-radius: 50%;
  background: rgba(197, 148, 79, .1);
  color: var(--vs-account-accent);
  font-size: 1.25rem;
  line-height: 1;
}

.workspace-widget-chart {
  position: relative;
}

.workspace-widget-chart::before {
  display: none;
  content: none;
}

.workspace-widget-chart.is-active-chart::before {
  display: none;
}

.workspace-widget-chart.is-active-chart .chart-panel {
  border-color: var(--vs-account-line);
  box-shadow: var(--vs-account-shadow);
}

.chart-yoga-indicator {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 5;
  max-width: calc(100% - 24px);
  padding: 4px 8px;
  overflow: hidden;
  border: 1px solid rgba(197, 148, 79, .36);
  border-radius: 999px;
  background: rgba(255, 252, 245, .92);
  color: var(--vs-account-ink);
  font-size: .64rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* Persistent workspace tool dock */

.workspace-tool-dock {
  position: sticky;
  top: calc(var(--account-topbar-height) + 8px);
  z-index: 30;
  align-self: start;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--vs-account-line);
  border-radius: 0 0 var(--vs-account-radius) var(--vs-account-radius);
  background: var(--vs-account-surface-solid);
  box-shadow: none;
  isolation: isolate;
  transition: box-shadow .18s ease;
}

.workspace-tool-dock.is-stuck {
  box-shadow: 0 8px 20px rgba(20, 32, 30, .08);
}

.workspace-tool-context {
  display: flex;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.active-chart-selector,
.method-selector {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--vs-account-muted);
  font-size: .68rem;
  font-weight: 750;
}

.active-chart-selector {
  width: clamp(180px, 17vw, 240px);
}

.method-selector {
  width: clamp(132px, 12vw, 170px);
}

.workspace-tool-context select {
  width: 100%;
  min-height: 40px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  outline: none;
  background: var(--paper);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
}

.workspace-tool-list {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  overflow: visible;
}

.workspace-tool {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 0;
}

.workspace-tool-main,
.workspace-tool-menu-trigger {
  min-height: 44px;
  border: 1px solid var(--vs-account-line);
  background: rgba(255, 252, 245, .72);
  color: var(--vs-account-ink);
  font: inherit;
  cursor: pointer;
}

.workspace-tool-main {
  display: grid;
  align-content: center;
  gap: 1px;
  min-width: 82px;
  max-width: 150px;
  padding: 5px 10px;
  border-radius: var(--vs-account-radius) 0 0 var(--vs-account-radius);
  text-align: left;
}

.workspace-tool-main > span {
  overflow: hidden;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-tool-main > small {
  overflow: hidden;
  color: var(--vs-account-muted);
  font-size: .64rem;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-tool-menu-trigger {
  display: grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  padding: 0;
  border-left: 0;
  border-radius: 0 var(--vs-account-radius) var(--vs-account-radius) 0;
  color: var(--vs-account-muted);
  font-size: .72rem;
}

.workspace-tool-customize-button .workspace-tool-main {
  min-width: 96px;
  border-radius: var(--vs-account-radius);
}

.workspace-tool-main:hover,
.workspace-tool-menu-trigger:hover,
.workspace-tool-menu-trigger[aria-expanded="true"] {
  border-color: rgba(197, 148, 79, .42);
  background: rgba(197, 148, 79, .1);
  color: var(--vs-account-ink);
}

.workspace-tool-menu-trigger[aria-expanded="true"] {
  box-shadow: inset 0 -2px 0 var(--vs-account-accent);
}

.workspace-tool-dock :is(button, select):focus-visible,
.workspace-tool-surface :is(button, select, input):focus-visible,
.workspace-tool-customize :is(button, select, input):focus-visible,
.workspace-widget-fullscreen-close:focus-visible {
  outline: 2px solid var(--vs-account-accent);
  outline-offset: 2px;
}

/* The surface is top-level so its fixed panel is not contained by account-main. */
.workspace-tool-surface {
  position: fixed;
  inset: 0;
  z-index: 86;
  pointer-events: none;
}

.workspace-tool-surface-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
  pointer-events: auto;
}

.workspace-tool-popover {
  position: fixed;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 11px;
  width: min(420px, calc(100vw - 24px));
  max-height: min(72svh, 620px);
  padding: 13px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(197, 148, 79, .28);
  border-radius: calc(var(--vs-account-radius) + 2px);
  outline: none;
  background: var(--paper);
  color: var(--vs-account-ink);
  box-shadow: 0 18px 44px rgba(20, 32, 30, .14);
  pointer-events: auto;
}

.workspace-tool-popover > header,
.workspace-tool-customize-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workspace-tool-popover > header > div,
.workspace-tool-customize-header > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.workspace-tool-popover > header span,
.workspace-tool-customize-header span {
  color: var(--vs-account-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.workspace-tool-popover > header h2,
.workspace-tool-customize-header h2 {
  margin: 0;
  color: var(--vs-account-ink);
  font-family: Literata, Georgia, serif;
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.2;
}

.workspace-tool-popover > header > button,
.workspace-tool-customize-header > button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--vs-account-line);
  border-radius: 50%;
  background: rgba(255, 252, 245, .72);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: 1.05rem;
  cursor: pointer;
}

.workspace-tool-popover-content {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.workspace-tool-popover-section {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.workspace-tool-popover-section + .workspace-tool-popover-section {
  padding-top: 10px;
  border-top: 1px solid var(--vs-account-line);
}

.period-method-group.is-method-active {
  padding-left: 8px;
  border-left: 2px solid rgba(197, 148, 79, .5);
}

.workspace-tool-popover-section h3,
.workspace-tool-customize-section h3 {
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.workspace-tool-popover-section p,
.workspace-tool-customize-section p {
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .74rem;
}

.workspace-tool-choice-grid,
.workspace-tool-action-grid,
.workspace-tool-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.workspace-tool-form-grid label,
.workspace-tool-conditional-field,
.workspace-tool-customize-fields label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--vs-account-muted);
  font-size: .69rem;
  font-weight: 750;
}

.workspace-tool-form-grid label:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.workspace-tool-popover-content button,
.workspace-tool-popover-content select,
.workspace-tool-popover-content input,
.workspace-tool-customize-body button,
.workspace-tool-customize-body select {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  background: rgba(255, 252, 245, .72);
  color: var(--vs-account-ink);
  font: inherit;
}

.workspace-tool-popover-content button,
.workspace-tool-customize-body button {
  padding: 7px 9px;
  font-size: .72rem;
  font-weight: 750;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.workspace-tool-popover-content select,
.workspace-tool-popover-content input,
.workspace-tool-customize-body select {
  width: 100%;
  padding: 0 10px;
  font-size: .74rem;
}

.workspace-tool-popover-content button:hover,
.workspace-tool-customize-body button:hover,
.workspace-tool-popover-content button[aria-pressed="true"] {
  border-color: rgba(197, 148, 79, .42);
  background: rgba(197, 148, 79, .11);
}

.workspace-tool-choice-grid button {
  display: grid;
  align-content: center;
  gap: 1px;
}

.workspace-tool-choice-grid button strong {
  color: var(--vs-account-ink);
  font-size: .74rem;
}

.workspace-tool-choice-grid button span {
  color: var(--vs-account-muted);
  font-size: .66rem;
  font-weight: 650;
}

.workspace-tool-selection,
.workspace-tool-quick-note {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(197, 148, 79, .28);
  border-radius: var(--vs-account-radius);
  background: rgba(197, 148, 79, .08);
}

.workspace-tool-selection span,
.workspace-tool-quick-note span {
  color: var(--vs-account-muted);
  font-size: .7rem;
}

.workspace-tool-quick-note button {
  justify-self: start;
  margin-top: 4px;
}

.workspace-extra-tool-list {
  display: grid;
  gap: 8px;
}

.workspace-extra-tool-row {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  background: rgba(255, 252, 245, .52);
}

.workspace-extra-tool-row > strong {
  font-size: .76rem;
}

.workspace-extra-tool-row > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

/* Tool dock customization drawer */
.workspace-tool-customize {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
}

.workspace-tool-customize-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-self: stretch;
  justify-self: end;
  gap: 14px;
  width: min(480px, calc(100vw - 24px));
  height: 100%;
  padding: 18px;
  overflow: hidden;
  border-left: 1px solid var(--vs-account-line);
  outline: none;
  background: var(--paper);
  box-shadow: -24px 0 68px rgba(16, 24, 25, .2);
}

.workspace-tool-customize-body {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1px 4px 8px 1px;
}

.workspace-tool-customize-section {
  display: grid;
  gap: 8px;
}

.workspace-tool-order-list,
.workspace-tool-pin-list,
.workspace-tool-favorite-list {
  display: grid;
  gap: 7px;
}

.workspace-tool-setting-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  margin-inline: 0;
  padding: 4px 7px;
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  background: rgba(255, 252, 245, .62);
}

.workspace-tool-setting-row.is-dragging {
  border-color: rgba(197, 148, 79, .5);
  opacity: .62;
}

.workspace-tool-setting-row > strong {
  min-width: 0;
  font-size: .78rem;
}

.workspace-tool-drag-handle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--vs-account-muted);
  cursor: grab;
  user-select: none;
}

.workspace-tool-order-actions {
  display: flex;
  gap: 4px;
}

.workspace-tool-order-actions button {
  display: grid;
  place-items: center;
  width: 40px;
  padding: 0;
  text-align: center;
}

.workspace-tool-order-actions button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.workspace-tool-pin-setting {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  background: rgba(255, 252, 245, .56);
  color: var(--vs-account-ink);
  font-size: .76rem;
  font-weight: 700;
}

.workspace-tool-pin-setting input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--vs-account-accent);
}

.workspace-tool-customize-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.workspace-tool-favorite-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-tool-customize-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 11px;
  border-top: 1px solid var(--vs-account-line);
}

.workspace-tool-customize-footer span {
  color: var(--vs-account-muted);
  font-size: .68rem;
}

/* Tool actions can focus an existing widget without changing the row grid. */
.workspace-widget {
  scroll-margin-block-start: calc(var(--account-topbar-height) + var(--workspace-tool-dock-height) + 24px);
}

.workspace-widget.is-tool-focus-highlight {
  outline: none;
  animation: none;
}

@keyframes workspace-tool-focus {
  0%,
  55% {
    outline-color: rgba(197, 148, 79, .78);
  }

  100% {
    outline-color: transparent;
  }
}

.workspace-widget.is-workspace-widget-fullscreen {
  position: fixed;
  inset: 16px;
  z-index: 110;
  grid-column: auto !important;
  width: auto;
  height: auto;
  max-height: calc(100svh - 32px);
  margin: 0;
  padding-top: 64px;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  box-shadow: 0 0 0 100vmax rgba(16, 24, 25, .46), 0 28px 78px rgba(16, 24, 25, .28) !important;
}

.workspace-widget-fullscreen-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(197, 148, 79, .4);
  border-radius: 999px;
  background: var(--paper);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}

.workspace-bottom-action {
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

[data-add-row]:disabled {
  border-color: var(--vs-account-line);
  background: rgba(20, 32, 30, .045);
  color: var(--vs-account-muted);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .72;
}

.row-popover {
  position: fixed;
  top: 118px;
  right: 20px;
  z-index: 88;
  display: grid;
  gap: 10px;
  width: min(270px, calc(100vw - 28px));
  padding: 15px;
  border: 1px solid rgba(197, 148, 79, .3);
  border-radius: calc(var(--vs-account-radius) + 2px);
  background: rgba(255, 252, 245, .98);
  box-shadow: 0 22px 58px rgba(20, 32, 30, .18);
  color: var(--vs-account-ink);
}

.row-popover strong {
  font-family: Literata, Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
}

.row-popover > span {
  color: var(--vs-account-muted);
  font-size: .75rem;
  font-weight: 700;
}

.row-popover-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.row-popover-options button {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--vs-account-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .64);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}

.row-popover-options button:hover {
  border-color: rgba(197, 148, 79, .45);
  background: rgba(197, 148, 79, .11);
}

.row-popover-cancel {
  justify-self: end;
  min-height: 36px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}

/* Ashtakavarga prototype */

.ashtakavarga-panel,
.ashtakavarga-widget,
.workspace-widget[data-widget-type="ashtakavarga"] {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.ashtakavarga-header,
.ashtakavarga-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.ashtakavarga-header h3,
.ashtakavarga-heading h3,
.ashtakavarga-header h2,
.ashtakavarga-heading h2 {
  margin: 0;
  font-family: Literata, Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
}

.ashtakavarga-header p,
.ashtakavarga-heading p {
  margin: 3px 0 0;
  color: var(--vs-account-muted);
  font-size: .78rem;
}

.ashtakavarga-controls,
.ashtakavarga-toolbar,
.ashtakavarga-mode-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ashtakavarga-toolbar {
  justify-content: space-between;
}

.ashtakavarga-tabs,
.ashtakavarga-style {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ashtakavarga-controls button,
.ashtakavarga-toolbar button,
.ashtakavarga-mode-tabs button,
.ashtakavarga-controls select,
.ashtakavarga-toolbar select {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--vs-account-line);
  border-radius: 999px;
  background: rgba(255, 252, 245, .72);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
}

.ashtakavarga-controls button.active,
.ashtakavarga-toolbar button.active,
.ashtakavarga-mode-tabs button.active,
.ashtakavarga-controls button[aria-pressed="true"],
.ashtakavarga-toolbar button[aria-pressed="true"],
.ashtakavarga-mode-tabs button[aria-selected="true"] {
  border-color: rgba(197, 148, 79, .42);
  background: rgba(197, 148, 79, .13);
}

.ashtakavarga-content,
.ashtakavarga-grid {
  min-width: 0;
}

.ashtakavarga-heading label {
  display: grid;
  gap: 4px;
  min-width: 150px;
  color: var(--vs-account-muted);
  font-size: .72rem;
  font-weight: 750;
}

.ashtakavarga-heading select {
  width: 100%;
  min-height: 36px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--vs-account-line);
  border-radius: 999px;
  background: rgba(255, 252, 245, .72);
  color: var(--vs-account-ink);
  font: inherit;
}

.ashtakavarga-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(48px, 1fr));
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.ashtakavarga-cell {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 54px;
  padding: 6px;
  border: 1px solid var(--vs-account-line);
  border-radius: 8px;
  background: rgba(255, 252, 245, .64);
}

.ashtakavarga-cell span {
  color: var(--vs-account-muted);
  font-size: .68rem;
  font-weight: 750;
}

.ashtakavarga-cell strong {
  color: var(--vs-account-ink);
  font-size: .98rem;
}

.ashtakavarga-board {
  display: grid;
  grid-template-columns: repeat(12, minmax(54px, 1fr));
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}

.ashtakavarga-board[data-style="north"] .ashtakavarga-cell {
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(255, 252, 245, .76), rgba(232, 238, 232, .42));
}

.ashtakavarga-note {
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .72rem;
}

.ashtakavarga-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.ashtakavarga-panel table,
.ashtakavarga-widget table,
.workspace-widget[data-widget-type="ashtakavarga"] table {
  min-width: 680px;
}

/* Catalog controls and galleries */

.gallery-controls {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  background: rgba(255, 252, 245, .52);
}

.gallery-controls > label {
  display: grid;
  flex: 0 1 180px;
  gap: 5px;
  min-width: 145px;
  color: var(--vs-account-muted);
  font-size: .72rem;
  font-weight: 750;
}

.gallery-controls .gallery-search {
  flex: 1 1 230px;
}

.gallery-controls input,
.gallery-controls select {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--vs-account-line);
  border-radius: 999px;
  outline: none;
  background: rgba(255, 252, 245, .78);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .8rem;
}

.segmented-control {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.segmented-control legend {
  float: left;
  width: 100%;
  margin: 0 0 5px;
  padding: 0;
  color: var(--vs-account-muted);
  font-size: .72rem;
  font-weight: 750;
}

.segmented-control button {
  min-width: 38px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 999px;
  background: rgba(255, 252, 245, .7);
  color: var(--vs-account-muted);
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}

.segmented-control button:hover {
  color: var(--vs-account-ink);
}

.segmented-control button.active,
.segmented-control button[aria-pressed="true"],
.segmented-control button[aria-selected="true"] {
  border-color: rgba(197, 148, 79, .44);
  background: rgba(197, 148, 79, .14);
  color: var(--vs-account-ink);
}

.varga-gallery,
.yoga-gallery,
.yoga-group-grid,
.yoga-category-grid {
  --gallery-columns: 3;
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.varga-gallery {
  --gallery-columns: 4;
}

.varga-gallery[data-columns="3"],
.yoga-gallery[data-columns="3"],
.yoga-group-grid[data-columns="3"],
.yoga-category-grid[data-columns="3"] {
  --gallery-columns: 3;
}

.varga-gallery[data-columns="4"],
.yoga-gallery[data-columns="4"],
.yoga-group-grid[data-columns="4"],
.yoga-category-grid[data-columns="4"] {
  --gallery-columns: 4;
}

.varga-gallery[data-columns="5"],
.yoga-gallery[data-columns="5"],
.yoga-group-grid[data-columns="5"],
.yoga-category-grid[data-columns="5"] {
  --gallery-columns: 5;
}

.varga-card,
.yoga-card {
  min-width: 0;
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  background: var(--vs-account-surface);
  box-shadow: var(--vs-account-shadow);
}

.varga-card {
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 12px;
}

.varga-card-header,
.varga-card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.varga-card-header h3,
.varga-card-heading h3,
.varga-card h3 {
  margin: 0;
  color: var(--vs-account-ink);
  font-family: Literata, Georgia, serif;
  font-size: 1.02rem;
  font-weight: 600;
}

.varga-card-code,
.varga-card-header strong,
.varga-card-heading strong {
  color: var(--vs-account-accent);
  font-size: .75rem;
  font-weight: 850;
}

.varga-card-name,
.varga-card-header span,
.varga-card-heading span {
  color: var(--vs-account-muted);
  font-size: .75rem;
}

.varga-preview,
.varga-preview-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(20, 32, 30, .14);
  border-radius: 10px;
  background: rgba(255, 253, 248, .82);
  contain: layout paint style;
}

.varga-preview svg,
.varga-preview-stage svg {
  display: block;
  width: 100%;
  height: 100%;
}

.varga-preview-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--vs-account-muted);
  font-size: .72rem;
}

.varga-card > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.varga-card > header > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.varga-card > header > div > strong {
  color: var(--vs-account-accent);
  font-size: .7rem;
  font-weight: 850;
}

.varga-card > header > span {
  color: var(--vs-account-muted);
  font-size: .68rem;
  font-weight: 750;
  white-space: nowrap;
}

.varga-preview-south,
.varga-preview-north {
  position: absolute;
  inset: 7%;
  color: var(--vs-account-ink);
}

.varga-preview-south {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(33, 29, 24, .32);
  background: rgba(255, 253, 248, .86);
}

.varga-preview-cell {
  position: relative;
  min-width: 0;
  padding: clamp(2px, .65vw, 5px);
  overflow: hidden;
  border: 1px solid rgba(33, 29, 24, .17);
  color: var(--teal);
  font-size: clamp(7px, .72vw, 10px);
  font-weight: 750;
  line-height: 1.1;
}

.varga-preview-cell[data-slot="1"] { grid-column: 1; grid-row: 1; }
.varga-preview-cell[data-slot="2"] { grid-column: 2; grid-row: 1; }
.varga-preview-cell[data-slot="3"] { grid-column: 3; grid-row: 1; }
.varga-preview-cell[data-slot="4"] { grid-column: 4; grid-row: 1; }
.varga-preview-cell[data-slot="5"] { grid-column: 4; grid-row: 2; }
.varga-preview-cell[data-slot="6"] { grid-column: 4; grid-row: 3; }
.varga-preview-cell[data-slot="7"] { grid-column: 4; grid-row: 4; }
.varga-preview-cell[data-slot="8"] { grid-column: 3; grid-row: 4; }
.varga-preview-cell[data-slot="9"] { grid-column: 2; grid-row: 4; }
.varga-preview-cell[data-slot="10"] { grid-column: 1; grid-row: 4; }
.varga-preview-cell[data-slot="11"] { grid-column: 1; grid-row: 3; }
.varga-preview-cell[data-slot="12"] { grid-column: 1; grid-row: 2; }

.varga-preview-south > strong {
  display: grid;
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  place-items: center;
  border: 1px solid rgba(33, 29, 24, .25);
  color: rgba(33, 29, 24, .42);
  font-family: Literata, Georgia, serif;
  font-size: clamp(11px, 1.35vw, 17px);
  font-weight: 550;
}

.varga-preview-north {
  overflow: hidden;
  border: 1px solid rgba(33, 29, 24, .3);
  background: rgba(255, 253, 248, .86);
}

.varga-preview-north svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(33, 29, 24, .3);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.varga-preview-north > strong {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(33, 29, 24, .42);
  font-family: Literata, Georgia, serif;
  font-size: clamp(11px, 1.35vw, 17px);
  font-weight: 550;
  transform: translate(-50%, -50%);
}

.varga-preview-north > span {
  position: absolute;
  color: var(--teal);
  font-size: clamp(7px, .72vw, 10px);
  font-weight: 750;
  transform: translate(-50%, -50%);
}

.varga-card-actions,
.yoga-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.varga-card-actions button,
.yoga-card-actions button,
.varga-card-menu-trigger,
[data-open-varga-sheet],
[data-varga-card-menu] {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 999px;
  background: rgba(255, 252, 245, .68);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}

.varga-card-menu-trigger,
[data-open-varga-sheet],
[data-varga-card-menu] {
  display: none;
}

.yoga-group,
.yoga-category {
  display: grid;
  grid-column: 1 / -1;
  gap: 9px;
  min-width: 0;
}

.yoga-group-title,
.yoga-category-title,
.yoga-group-heading {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--vs-account-muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.yoga-card {
  display: grid;
  align-self: start;
  gap: 12px;
  padding: 15px;
}

.yoga-card-header,
.yoga-card-heading {
  display: grid;
  gap: 5px;
}

.yoga-card h3 {
  margin: 0;
  color: var(--vs-account-ink);
  font-family: Literata, Georgia, serif;
  font-size: 1.03rem;
  font-weight: 600;
  line-height: 1.2;
}

.yoga-card > header {
  display: grid;
  gap: 4px;
}

.yoga-card > header > span {
  color: var(--teal);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.yoga-status,
.yoga-card-status {
  justify-self: start;
  padding: 3px 8px;
  border: 1px solid rgba(31, 92, 90, .22);
  border-radius: 999px;
  background: rgba(31, 92, 90, .08);
  color: var(--teal);
  font-size: .68rem;
  font-weight: 850;
}

.yoga-card[data-status="partial"] .yoga-status,
.yoga-card[data-status="partial"] .yoga-card-status,
.yoga-card[data-yoga-status-value="partial"] .yoga-status {
  border-color: rgba(197, 148, 79, .34);
  background: rgba(197, 148, 79, .11);
  color: #88602b;
}

.yoga-card[data-status="not-detected"] .yoga-status,
.yoga-card[data-status="missing"] .yoga-status,
.yoga-card[data-status="absent"] .yoga-status,
.yoga-card[data-status="not-detected"] .yoga-card-status,
.yoga-card[data-status="missing"] .yoga-card-status,
.yoga-card[data-status="absent"] .yoga-card-status {
  border-color: var(--vs-account-line);
  background: rgba(20, 32, 30, .045);
  color: var(--vs-account-muted);
}

.yoga-card[data-yoga-status-value="absent"] .yoga-status {
  border-color: var(--vs-account-line);
  background: rgba(20, 32, 30, .045);
  color: var(--vs-account-muted);
}

.yoga-card .yoga-status {
  display: grid;
  gap: 1px;
}

.yoga-card .yoga-status > span,
.yoga-conditions > span,
.yoga-sources > span {
  color: var(--vs-account-muted);
  font-size: .66rem;
  font-weight: 750;
}

.yoga-card .yoga-status > strong {
  font-size: .73rem;
}

.yoga-card dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.yoga-card dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.yoga-card dt {
  color: var(--vs-account-muted);
  font-size: .7rem;
}

.yoga-card dd {
  margin: 0;
  color: var(--vs-account-ink);
  font-size: .74rem;
  font-weight: 750;
  text-align: right;
}

.yoga-meta,
.yoga-participants,
.yoga-source {
  display: grid;
  gap: 3px;
  color: var(--vs-account-muted);
  font-size: .75rem;
}

.yoga-meta strong,
.yoga-participants strong,
.yoga-source strong {
  color: var(--vs-account-ink);
  font-weight: 750;
}

.yoga-conditions {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.yoga-conditions li {
  position: relative;
  padding-left: 18px;
  color: var(--vs-account-muted);
  font-size: .76rem;
  line-height: 1.4;
}

.yoga-conditions li::before {
  content: "○";
  position: absolute;
  left: 0;
  color: var(--vs-account-muted);
}

.yoga-conditions li.met::before,
.yoga-conditions li[data-met="true"]::before {
  content: "✓";
  color: var(--teal);
}

.yoga-conditions ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.yoga-conditions li[data-condition-state]::before {
  content: none;
}

.yoga-conditions li > span {
  position: absolute;
  left: 0;
  color: var(--vs-account-muted);
  font-weight: 850;
}

.yoga-conditions li[data-condition-state="met"] > span {
  color: var(--teal);
}

.yoga-conditions li[data-condition-state="partial"] > span {
  color: #9b6b2f;
}

.yoga-sources {
  display: grid;
  gap: 5px;
}

.yoga-sources > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.yoga-sources a {
  color: var(--teal);
  font-size: .71rem;
  font-weight: 750;
}

.yoga-sources button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--vs-account-line);
  border-radius: 50%;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}

.yoga-card > footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.yoga-card > footer button {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 999px;
  background: rgba(255, 252, 245, .68);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
}

.yoga-method-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .72rem;
}

.yoga-method-links a {
  color: var(--teal);
  font-weight: 750;
}

.yoga-filter-button {
  display: none;
}

.yoga-load-more {
  justify-self: center;
}

.gallery-empty,
.varga-gallery-empty,
.yoga-gallery-empty {
  grid-column: 1 / -1;
  padding: 30px 18px;
  border: 1px dashed var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  color: var(--vs-account-muted);
  text-align: center;
  font-size: .82rem;
}

/* Widget drawer and mobile action sheet */

.widget-drawer,
.mobile-action-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
}

.workspace-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(16, 24, 25, .46);
  cursor: default;
}

.widget-drawer-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-self: stretch;
  justify-self: end;
  gap: 13px;
  width: min(440px, calc(100vw - 24px));
  height: 100%;
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: 1px solid var(--vs-account-line);
  background: var(--paper);
  box-shadow: -24px 0 68px rgba(16, 24, 25, .2);
}

.widget-drawer-header,
.mobile-action-sheet-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.widget-drawer-header span {
  color: var(--vs-account-muted);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.widget-drawer-header h2,
.mobile-action-sheet-panel h2 {
  margin: 2px 0 0;
  font-family: Literata, Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
}

.widget-drawer-header .account-icon-button {
  border-color: var(--vs-account-line);
  background: rgba(255, 252, 245, .72);
  color: var(--vs-account-ink);
}

.widget-drawer-panel > p {
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .8rem;
}

.widget-catalog {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

.widget-catalog-group,
.widget-category {
  display: grid;
  gap: 7px;
}

.widget-catalog-group h3,
.widget-category h3 {
  margin: 0;
  color: var(--teal);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.widget-catalog-options,
.widget-category-options,
.widget-catalog-group > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.widget-catalog button,
.widget-catalog-item,
.widget-option {
  min-width: 0;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid var(--vs-account-line);
  border-radius: 10px;
  background: rgba(255, 252, 245, .68);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.widget-catalog button:hover,
.widget-catalog-item:hover,
.widget-option:hover {
  border-color: rgba(197, 148, 79, .4);
  background: rgba(197, 148, 79, .09);
}

.mobile-action-sheet {
  align-items: end;
  z-index: 105;
}

.mobile-action-sheet-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  width: min(460px, 100%);
  max-height: min(88svh, 720px);
  margin: 0 auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--vs-account-line);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: var(--paper);
  box-shadow: 0 -24px 62px rgba(16, 24, 25, .22);
}

.mobile-action-sheet-panel header > button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--vs-account-line);
  border-radius: 50%;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}

.mobile-action-sheet-panel > button {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--vs-account-line);
  border-radius: 10px;
  background: rgba(255, 252, 245, .72);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

body.workspace-overlay-open {
  overflow: hidden;
}

/* Ring visibility changes only the already-built visual layer. */
.chart-stage[data-style="south"][data-rings-visible="false"] .astro-rings,
.chart-panel[data-style="south"][data-rings-visible="false"] .astro-rings {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.chart-stage[data-style="north"] .astro-rings,
.chart-panel[data-style="north"] .astro-rings,
.chart-stage[data-style="nabhasa"] .astro-rings,
.chart-panel[data-style="nabhasa"] .astro-rings {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.chart-panel:is([data-style="north"], [data-style="nabhasa"]) .rings-icon-button,
.chart-panel[data-style="north"] .nakshatra-pada-button,
.chart-panel[data-style="north"] [data-action="toggle-rings"],
.chart-panel[data-style="north"] [data-action="toggle-nakshatra-pada"],
.chart-panel[data-style="nabhasa"] .nakshatra-pada-button,
.chart-panel[data-style="nabhasa"] [data-action="toggle-rings"],
.chart-panel[data-style="nabhasa"] [data-action="toggle-nakshatra-pada"] {
  display: none;
}

.segmented-control {
  flex-wrap: wrap;
}

.segmented-control legend {
  float: none;
  flex: 0 0 100%;
}

@media (min-width: 761px) {
  .workspace-widget-chart .chart-toolbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .workspace-widget-chart .chart-controls {
    width: 100%;
    justify-content: space-between;
  }
}

@container (max-width: 1100px) {
  .varga-gallery[data-columns="5"],
  .yoga-gallery[data-columns="5"] {
    --gallery-columns: 4;
  }
}

@container (max-width: 940px) {
  .varga-gallery[data-columns="4"],
  .varga-gallery[data-columns="5"],
  .yoga-gallery[data-columns="4"],
  .yoga-gallery[data-columns="5"] {
    --gallery-columns: 3;
  }
}

@media (max-width: 1024px) {
  .varga-gallery,
  .yoga-gallery,
  .yoga-group-grid,
  .yoga-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .workspace-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-row > .workspace-widget,
  .workspace-row > .periods-panel:not(.varshaphala-widget-varshaphala-periods) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .current-workspace {
    gap: 13px;
  }

  .workspace-local-nav {
    margin-inline: -10px;
    padding-inline: 10px;
    scrollbar-width: none;
  }

  .workspace-local-nav::-webkit-scrollbar {
    display: none;
  }

  .workspace-local-nav button {
    min-height: 42px;
    padding-inline: 12px;
  }

  .workspace-local-view {
    gap: 13px;
  }

  .workspace-view-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .workspace-main-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
  }

  .workspace-main-actions button {
    min-width: 0;
    padding-inline: 10px;
  }

  .workspace-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .workspace-row > .workspace-widget,
  .workspace-row > .periods-panel:not(.varshaphala-widget-varshaphala-periods) {
    grid-column: 1 / -1;
  }

  .workspace-placeholder,
  .placeholder-widget,
  .widget-placeholder,
  .workspace-widget[data-widget-type="placeholder"] {
    min-height: 168px;
    padding: 18px;
  }

  .workspace-bottom-action .account-secondary-action {
    width: 100%;
  }

  .row-popover {
    right: auto;
    width: min(292px, calc(100vw - 24px));
    transform: none;
  }

  .ashtakavarga-panel,
  .ashtakavarga-widget,
  .workspace-widget[data-widget-type="ashtakavarga"] {
    padding: 14px;
  }

  .ashtakavarga-header,
  .ashtakavarga-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .gallery-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 10px;
  }

  .gallery-controls > label,
  .gallery-controls .gallery-search {
    width: 100%;
    min-width: 0;
  }

  .gallery-column-control {
    display: none;
  }

  .yoga-filter-button {
    display: inline-flex;
  }

  .yoga-gallery-controls {
    display: none;
  }

  .yoga-gallery-controls.open,
  .yoga-gallery-controls.mobile-open,
  .yoga-gallery-controls[data-open="true"],
  #workspace-panel-yogas:has(.yoga-filter-button[aria-expanded="true"]) .yoga-gallery-controls {
    display: grid;
  }

  .varga-gallery,
  .yoga-gallery,
  .yoga-group-grid,
  .yoga-category-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .varga-card {
    padding: 11px;
  }

  .varga-card-actions {
    display: none;
  }

  .varga-card-menu-trigger,
  [data-open-varga-sheet],
  [data-varga-card-menu] {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
  }

  .widget-drawer {
    align-items: end;
  }

  .widget-drawer-panel {
    align-self: end;
    justify-self: stretch;
    width: 100%;
    height: auto;
    max-height: min(88svh, 760px);
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--vs-account-line);
    border-left: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -24px 62px rgba(16, 24, 25, .22);
  }

  .widget-catalog-options,
  .widget-category-options,
  .widget-catalog-group > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-toolbar .icon-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .chart-toolbar .chart-select {
    min-height: 40px;
  }

  .chart-controls {
    flex-wrap: wrap;
  }

  .segmented-control button,
  .yoga-card > footer button,
  .yoga-sources button {
    min-height: 40px;
  }

  .yoga-sources button {
    width: 40px;
    height: 40px;
  }
}

@container (max-width: 1080px) {
  .workspace-tool-dock {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-tool-list {
    justify-content: flex-start;
  }
}

@media (max-width: 1180px) {
  .workspace-tool-dock {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-tool-list {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: clip;
  }

  .workspace-tool-dock {
    top: calc(var(--account-topbar-height) + 8px);
    gap: 7px;
    margin-inline: -10px;
    padding: 7px 10px 8px;
    border-radius: 0;
  }

  .workspace-tool-context {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    width: 100%;
  }

  .active-chart-selector,
  .method-selector {
    width: auto;
  }

  .workspace-tool-context select {
    min-height: 40px;
    font-size: .72rem;
  }

  .workspace-tool-list {
    width: calc(100% + 20px);
    margin-inline: -10px;
    padding: 2px 10px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    flex-wrap: nowrap;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  .workspace-tool-list::-webkit-scrollbar {
    display: none;
  }

  .workspace-tool-main,
  .workspace-tool-menu-trigger {
    min-height: 40px;
  }

  .workspace-tool-main {
    min-width: 78px;
    padding-block: 4px;
  }

  .workspace-tool-main > small {
    display: none;
  }

  .workspace-tool-surface {
    display: grid;
    align-items: end;
    padding: 8px 8px calc(76px + env(safe-area-inset-bottom));
  }

  .workspace-tool-surface-backdrop {
    background: rgba(16, 24, 25, .46);
  }

  .workspace-tool-popover {
    position: relative;
    left: auto !important;
    top: auto !important;
    align-self: end;
    justify-self: center;
    width: min(460px, 100%);
    max-height: min(calc(100svh - var(--account-topbar-height) - 100px), 720px);
    margin: 0;
    padding: 14px;
    border-radius: 18px;
    box-shadow: 0 -18px 52px rgba(16, 24, 25, .22);
  }

  .workspace-tool-action-grid,
  .workspace-tool-form-grid,
  .workspace-extra-tool-row > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-tool-form-grid label:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .workspace-tool-popover-content button,
  .workspace-tool-popover-content select,
  .workspace-tool-popover-content input {
    min-height: 40px;
  }

  .workspace-tool-customize {
    align-items: end;
    padding: 8px 8px calc(76px + env(safe-area-inset-bottom));
  }

  .workspace-tool-customize-panel {
    align-self: end;
    justify-self: stretch;
    width: 100%;
    height: auto;
    max-height: min(calc(100svh - 92px - env(safe-area-inset-bottom)), 760px);
    padding: 15px 14px;
    border-top: 1px solid var(--vs-account-line);
    border-left: 0;
    border-radius: 18px;
    box-shadow: 0 -20px 58px rgba(16, 24, 25, .22);
  }

  .workspace-tool-favorite-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-widget.is-workspace-widget-fullscreen {
    inset: 8px 8px calc(76px + env(safe-area-inset-bottom));
    max-height: calc(100svh - 92px - env(safe-area-inset-bottom));
    padding-top: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-local-nav button,
  .account-toast,
  .astro-rings,
  .workspace-tool-dock,
  .workspace-widget-chart::before {
    transition: none;
  }

  .workspace-widget.is-tool-focus-highlight {
    outline: none;
    animation: none;
  }
}

/* Workspace v3: compact framing and a single configurable canvas ---------- */

.account-main {
  padding: 12px 16px 20px;
}

/* Wide desktop keeps the proven 1440 px workspace geometry. Once the
   content reaches that width, additional viewport space becomes symmetric
   page margins instead of enlarging D1/D9 and the neighbouring column.
   Making the page the nearest size container also keeps cqw-owned chart-row
   heights tied to the capped canvas rather than to the growing account main. */
@media (min-width: 1181px) {
  .account-main > .workspace-page[data-account-view="workspace"] {
    width: min(100%, var(--workspace-desktop-max-width));
    max-width: var(--workspace-desktop-max-width);
    margin-inline: auto;
    container-type: inline-size;
  }
}

.workspace-page {
  gap: 8px;
}

.workspace-compact-header,
.workspace-page > .workspace-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  min-height: 46px;
  padding: 2px 0 4px;
}

.workspace-compact-title,
.workspace-page > .workspace-heading > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 12px;
  min-width: 0;
}

.workspace-compact-header h1,
.workspace-page > .workspace-heading h1 {
  margin: 0;
  color: var(--vs-account-ink);
  font-family: Literata, Georgia, serif;
  font-size: clamp(1.18rem, 1.5vw, 1.42rem);
  font-weight: 600;
  line-height: 1.1;
}

.workspace-page > .workspace-heading p {
  display: none;
}

.workspace-compact-header [data-current-chart-context],
.workspace-page > .workspace-heading .workspace-context {
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .76rem;
  line-height: 1.25;
}

.workspace-compact-header .account-save-state,
.workspace-page > .workspace-heading .account-save-state {
  flex: 0 0 auto;
  font-size: .7rem;
  white-space: nowrap;
}

/* Legacy staging layers are removed from the workspace framing. */
.workspace-page > .favorite-quick-access,
.current-workspace > .workspace-local-nav,
#workspace-panel-main > .workspace-view-heading,
#workspace-panel-main > .workspace-bottom-action,
#workspace-panel-main .workspace-main-actions {
  display: none !important;
}

.current-workspace {
  gap: 0;
}

.workspace-canvas,
#workspace-panel-main {
  min-width: 0;
  padding: 0;
  border: 0;
  background: var(--vs-account-workspace-bg, color-mix(in srgb, var(--mist) 42%, var(--paper)));
}

.workspace-canvas.workspace-local-view,
#workspace-panel-main.workspace-local-view {
  gap: 0;
}

/* The tool dock stays a single quiet line at every desktop width. */
.workspace-tool-dock {
  top: var(--account-topbar-height);
  grid-template-columns: minmax(178px, 228px) minmax(0, 1fr);
  gap: 8px;
  min-height: 48px;
  padding: 3px 0 4px;
  border-bottom: 1px solid var(--vs-account-line);
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
}

.workspace-tool-dock.is-stuck {
  box-shadow: 0 5px 14px rgba(20, 32, 30, .06);
}

.workspace-tool-context {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.workspace-tool-context .method-selector {
  display: none;
}

.workspace-tool-context .active-chart-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.workspace-tool-context .active-chart-selector > span {
  flex: 0 0 auto;
  font-size: .66rem;
}

.workspace-tool-context select {
  min-width: 0;
  min-height: 40px;
  padding-inline: 9px 27px;
  border-radius: 6px;
  font-size: .72rem;
}

.workspace-tool-list {
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
  width: auto;
  margin-inline: 0;
  padding: 1px 2px 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.workspace-tool-list::-webkit-scrollbar {
  display: none;
}

.workspace-tool-main,
.workspace-tool-menu-trigger {
  min-height: 40px;
  background: rgba(255, 252, 245, .66);
}

.workspace-tool-main {
  min-width: 62px;
  max-width: 126px;
  padding: 3px 8px;
  border-radius: 6px 0 0 6px;
}

.workspace-tool-main > span {
  font-size: .72rem;
}

.workspace-tool-main > small {
  display: none;
}

.workspace-tool-menu-trigger {
  width: 40px;
  min-width: 40px;
  border-radius: 0 6px 6px 0;
}

.workspace-tool-customize-button .workspace-tool-main {
  min-width: 82px;
  border-radius: 6px;
}

/* Row-based canvas. The new names fall back to v2 inline custom properties. */
.workspace-rows {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.workspace-rows:has(> .workspace-row-shell) {
  gap: 0;
}

.workspace-row-shell {
  display: grid;
  gap: 0;
  min-width: 0;
}

.workspace-row {
  --workspace-columns: var(--row-columns, 3);
  display: grid;
  grid-template-columns: repeat(var(--workspace-columns), minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  min-width: 0;
  border: 0;
  column-rule: 0;
}

.workspace-widget {
  --workspace-span: var(--widget-span, 1);
  grid-column: span var(--workspace-span);
  min-width: 0;
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  background: var(--vs-account-surface);
  box-shadow: none;
}

.workspace-widget-chart {
  background: var(--vs-account-surface);
}

.workspace-widget-chart .chart-panel,
.workspace-widget-chart .chart-viewer > .chart-panel,
.workspace-widget-chart.is-active-chart .chart-panel {
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

.periods-panel,
.planet-table-panel,
.ashtakavarga-panel,
.workspace-placeholder,
.workspace-widget[data-widget-type="placeholder"],
.workspace-mock-widget,
.workspace-widget[data-widget-render="mock"],
.workspace-widget[data-widget-type="ashtakavarga"] {
  box-shadow: none;
}

.workspace-widget-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 2px 7px 2px 3px;
  border-bottom: 1px solid var(--vs-account-line);
}

.workspace-widget-drag-handle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: color-mix(in srgb, var(--vs-account-muted) 54%, transparent);
  font: inherit;
  cursor: grab;
  touch-action: none;
}

.workspace-widget:hover .workspace-widget-drag-handle,
.workspace-widget:focus-within .workspace-widget-drag-handle,
.workspace-widget-drag-handle:focus-visible {
  background: rgba(197, 148, 79, .08);
  color: var(--vs-account-ink);
}

.workspace-widget-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--vs-account-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-widget .workspace-widget-title strong {
  color: inherit;
  font: inherit;
}

.workspace-widget-source {
  padding: 2px 7px;
  border: 1px solid var(--vs-account-line);
  border-radius: 999px;
  color: var(--vs-account-muted);
  font-size: .65rem;
  font-weight: 750;
  white-space: nowrap;
}

.workspace-widget-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

.workspace-widget-actions button,
[data-open-widget-action-menu] {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--vs-account-muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.workspace-widget-actions button:hover,
[data-open-widget-action-menu]:hover,
[data-open-widget-action-menu][aria-expanded="true"],
[data-widget-menu][aria-expanded="true"] {
  border-color: var(--vs-account-line);
  background: rgba(197, 148, 79, .08);
  color: var(--vs-account-ink);
}

.workspace-widget-body {
  min-width: 0;
  padding: 10px;
}

.workspace-widget-chart .workspace-widget-body {
  padding: 0;
}

.planet-table-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
}

.planet-table-panel > .workspace-widget-body {
  min-height: 0;
  padding: 0;
}

.planet-table-panel .planet-table-wrap {
  width: 100%;
  max-width: 100%;
  max-height: 520px;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.planet-table-panel thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
}

.workspace-placeholder,
.workspace-widget[data-widget-type="placeholder"],
.workspace-mock-widget,
.workspace-widget[data-widget-render="mock"] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  place-items: stretch;
  align-content: stretch;
  gap: 0;
  padding: 0;
  text-align: left;
}

.workspace-placeholder > .workspace-widget-body,
.workspace-widget[data-widget-type="placeholder"] > .workspace-widget-body {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  min-height: 176px;
  padding: 18px;
  text-align: center;
}

.workspace-mock-widget > .workspace-widget-body,
.workspace-widget[data-widget-render="mock"] > .workspace-widget-body {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 150px;
  padding: 14px;
}

.workspace-widget .workspace-widget-drag-handle,
.workspace-widget .workspace-widget-actions button {
  margin: 0;
}

.workspace-placeholder .workspace-widget-drag-handle,
.workspace-placeholder .workspace-widget-actions button,
.workspace-widget[data-widget-type="placeholder"] .workspace-widget-drag-handle,
.workspace-widget[data-widget-type="placeholder"] .workspace-widget-actions button {
  justify-self: auto;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
}

.workspace-placeholder:hover .workspace-widget-drag-handle,
.workspace-placeholder:focus-within .workspace-widget-drag-handle,
.workspace-widget[data-widget-type="placeholder"]:hover .workspace-widget-drag-handle,
.workspace-widget[data-widget-type="placeholder"]:focus-within .workspace-widget-drag-handle,
.workspace-placeholder .workspace-widget-actions button:hover,
.workspace-widget[data-widget-type="placeholder"] .workspace-widget-actions button:hover {
  border-color: var(--vs-account-line);
  background: rgba(197, 148, 79, .08);
}

.workspace-row-inserter {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 26px;
  height: 26px;
  margin: 5px 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--vs-account-line) 72%, transparent);
  border-radius: 50%;
  background: var(--paper);
  color: var(--vs-account-muted);
  font: inherit;
  font-size: .92rem;
  line-height: 1;
  cursor: pointer;
  opacity: .24;
  transition: opacity .16s ease, border-color .16s ease, color .16s ease;
}

.workspace-row-shell:hover > .workspace-row-inserter,
.workspace-row-shell:focus-within > .workspace-row-inserter,
.workspace-row-inserter:focus-visible {
  border-color: rgba(197, 148, 79, .44);
  color: var(--vs-account-accent);
  opacity: 1;
}

/* Shared widget action menu: quiet dropdown on desktop. */
.workspace-widget-action-surface {
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
}

.workspace-widget-action-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
  pointer-events: auto;
}

.workspace-widget-action-panel,
.workspace-widget-action-menu {
  position: fixed;
  z-index: 1;
  display: grid;
  width: min(232px, calc(100vw - 24px));
  max-height: min(72svh, 520px);
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  outline: none;
  background: var(--paper);
  box-shadow: 0 14px 36px rgba(20, 32, 30, .14);
  pointer-events: auto;
}

.workspace-widget-action-menu-content,
.workspace-widget-action-list {
  display: grid;
  gap: 2px;
}

.workspace-widget-action-menu-content button,
.workspace-widget-action-list button {
  min-height: 40px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.workspace-widget-action-menu-content button:hover,
.workspace-widget-action-list button:hover {
  background: rgba(197, 148, 79, .09);
}

.workspace-widget-action-menu-content button[data-widget-action="remove"],
.workspace-widget-action-list button[data-widget-action="remove"],
.workspace-widget-action-menu-content button[data-widget-action="delete"],
.workspace-widget-action-list button[data-widget-action="delete"] {
  color: #8a4038;
}

.workspace-widget-action-menu-content button:disabled,
.workspace-widget-action-list button:disabled,
.workspace-row-inserter:disabled {
  cursor: not-allowed;
  opacity: .4;
}

/* Periods widget: controls plus an internally scrolling list. */
.periods-panel {
  container: periods / inline-size;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 0;
  min-height: 360px;
  max-height: 620px;
  padding: 0;
  overflow: hidden;
  background: var(--vs-account-surface);
}

.periods-panel > .periods-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--vs-account-line);
}

.periods-panel > .periods-heading h2,
.periods-panel .workspace-widget-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 750;
}

.periods-panel > .periods-heading span {
  margin: 0;
  font-size: .68rem;
}

.periods-panel > .workspace-widget-body,
.periods-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  min-height: 0;
  padding: 9px 10px 10px;
  overflow: hidden;
}

.periods-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.period-system-select {
  display: grid;
  gap: 3px;
  min-width: 142px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vs-account-muted);
  font-size: .62rem;
  font-weight: 750;
}

.period-system-select select,
.periods-toolbar select {
  min-width: 142px;
  min-height: 36px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .7rem;
  font-weight: 700;
}

.period-depth-control,
.period-scope-control,
.period-navigation,
.periods-button-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.period-depth-control legend,
.period-scope-control legend,
.periods-button-group legend {
  flex: 0 0 100%;
  margin: 0 0 3px;
  padding: 0;
  color: var(--vs-account-muted);
  font-size: .62rem;
  font-weight: 750;
}

.period-depth-control button,
.period-scope-control button,
.period-navigation button,
.periods-button-group button {
  min-width: 36px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
  background: rgba(255, 252, 245, .66);
  color: var(--vs-account-muted);
  font: inherit;
  font-size: .72rem;
  font-weight: 750;
  cursor: pointer;
}

.period-depth-control button[aria-pressed="true"],
.period-scope-control button[aria-pressed="true"],
.periods-button-group button[aria-pressed="true"] {
  border-color: rgba(197, 148, 79, .42);
  background: rgba(197, 148, 79, .12);
  color: var(--vs-account-ink);
}

.period-navigation {
  margin-left: auto;
}

.period-list {
  min-width: 0;
  min-height: 0;
  max-height: 488px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  scrollbar-width: thin;
  scrollbar-color: rgba(197, 148, 79, .32) transparent;
}

.period-list-header,
.period-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 94px 94px 92px;
  align-items: center;
  gap: 8px;
  min-width: 560px;
}

.period-list-header {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 34px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--vs-account-line);
  background: var(--paper);
  color: var(--vs-account-muted);
  font-size: .63rem;
  font-weight: 800;
  text-transform: uppercase;
}

.period-row {
  position: relative;
  min-height: 44px;
  padding: 7px 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--vs-account-line) 78%, transparent);
  color: var(--vs-account-ink);
  font-size: .7rem;
}

.period-row:last-child {
  border-bottom: 0;
}

.period-row.is-current,
.period-row[aria-current="true"] {
  background: rgba(197, 148, 79, .11);
  box-shadow: inset 3px 0 0 var(--vs-account-accent);
}

.period-path {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
}

.period-path [data-graha] {
  flex: 0 1 auto;
  min-width: 0;
  padding: 2px 4px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--period-graha-color) 24%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--period-graha-color) 10%, var(--paper));
  color: var(--period-graha-color);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.period-path [data-graha="Sa"] { --period-graha-color: #243a68; }
.period-path [data-graha="Ma"] { --period-graha-color: #a43f36; }
.period-path [data-graha="Me"] { --period-graha-color: #2f7a56; }
.period-path [data-graha="Mo"] { --period-graha-color: #666d72; }
.period-path [data-graha="Ve"] { --period-graha-color: #74519a; }
.period-path [data-graha="Su"] { --period-graha-color: #a9770c; }
.period-path [data-graha="Ju"] { --period-graha-color: #a65d1f; }
.period-path [data-graha="Ra"] { --period-graha-color: #77523a; }
.period-path [data-graha="Ke"] { --period-graha-color: #1f1d1b; }

.period-separator {
  flex: 0 0 auto;
  color: var(--vs-account-muted);
  font-weight: 500;
}

.period-start,
.period-end,
.period-date,
.period-age,
.period-date-range {
  font-variant-numeric: tabular-nums;
}

.period-start,
.period-end,
.period-date,
.period-age {
  white-space: nowrap;
}

.period-date-range {
  display: none;
  color: var(--vs-account-muted);
}

.period-current-badge {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid rgba(197, 148, 79, .38);
  border-radius: 999px;
  background: var(--paper);
  color: #795525;
  font-size: .6rem;
  font-weight: 800;
  white-space: nowrap;
}

@container periods (max-width: 620px) {
  .period-list-header,
  .period-row {
    grid-template-columns: minmax(236px, 1fr) 90px 92px;
    min-width: 440px;
  }

  .period-list-header .period-end,
  .period-list-header > span:nth-child(3),
  .period-row .period-end {
    display: none;
  }

  .period-navigation {
    margin-left: 0;
  }
}

@container periods (max-width: 430px) {
  .periods-toolbar {
    align-items: stretch;
  }

  .period-system-select,
  .periods-toolbar select {
    width: 100%;
  }

  .period-scope-control,
  .period-navigation {
    width: 100%;
  }

  .period-scope-control button,
  .period-navigation button {
    flex: 1 1 0;
  }

  .period-list-header {
    display: none;
  }

  .period-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    min-width: 0;
    padding: 9px 10px;
  }

  .period-row .period-start,
  .period-row .period-end,
  .period-row .period-date {
    display: none;
  }

  .period-date-range {
    display: block;
  }

  .period-age {
    color: var(--vs-account-muted);
    font-size: .67rem;
  }
}

/* Ashtakavarga keeps sign-owned values readable in SAV/BAV/Prastara. */
.ashtakavarga-panel,
.workspace-widget[data-widget-type="ashtakavarga"] {
  container: ashtakavarga / inline-size;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: var(--vs-account-surface);
}

.ashtakavarga-panel > .ashtakavarga-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 5px 9px;
  border-bottom: 1px solid var(--vs-account-line);
}

.ashtakavarga-panel > .ashtakavarga-heading h2,
.ashtakavarga-panel > .ashtakavarga-heading h3 {
  font-family: Inter, system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 750;
}

.ashtakavarga-panel > .ashtakavarga-heading label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ashtakavarga-panel > .ashtakavarga-heading select {
  min-height: 36px;
  border-radius: 6px;
}

.ashtakavarga-panel > .workspace-widget-body,
.ashtakavarga-body {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 10px;
}

.ashtakavarga-toolbar {
  padding: 8px 10px;
  border-bottom: 1px solid var(--vs-account-line);
}

.ashtakavarga-tabs,
.ashtakavarga-style,
.ashtakavarga-bav-tabs,
.ashtakavarga-mobile-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.ashtakavarga-tabs,
.ashtakavarga-style,
.ashtakavarga-bav-tabs {
  overflow-x: auto;
  scrollbar-width: none;
}

.ashtakavarga-tabs::-webkit-scrollbar,
.ashtakavarga-style::-webkit-scrollbar,
.ashtakavarga-bav-tabs::-webkit-scrollbar {
  display: none;
}

.ashtakavarga-tabs button,
.ashtakavarga-style button,
.ashtakavarga-bav-tabs button,
.ashtakavarga-mobile-tabs button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
  background: rgba(255, 252, 245, .66);
  color: var(--vs-account-muted);
  font: inherit;
  font-size: .7rem;
  font-weight: 750;
  cursor: pointer;
}

.ashtakavarga-tabs button[aria-pressed="true"],
.ashtakavarga-style button[aria-pressed="true"],
.ashtakavarga-bav-tabs button[aria-pressed="true"],
.ashtakavarga-mobile-tabs button[aria-pressed="true"] {
  border-color: rgba(197, 148, 79, .42);
  background: rgba(197, 148, 79, .12);
  color: var(--vs-account-ink);
}

.ashtakavarga-content {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.ashtakavarga-primary {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(280px, .72fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.ashtakavarga-map,
.ashtakavarga-chart,
[data-ashtaka-mobile-panel] {
  min-width: 0;
  border: 1px solid var(--vs-account-line);
  border-radius: var(--vs-account-radius);
  background: rgba(255, 252, 245, .58);
}

.ashtakavarga-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(28px, 1fr));
  align-items: end;
  gap: 5px;
  min-height: 240px;
  padding: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.ashtakavarga-chart > div {
  display: grid;
  grid-template-rows: 18px minmax(80px, 1fr) 18px;
  justify-items: center;
  align-items: end;
  gap: 4px;
  min-width: 28px;
  height: 214px;
  color: var(--vs-account-muted);
  font-size: .62rem;
}

.ashtakavarga-chart > div > i {
  display: block;
  align-self: end;
  width: min(20px, 68%);
  height: calc(var(--ashtaka-value, 0) * 4.5px);
  max-height: 164px;
  min-height: 2px;
  border-radius: 4px 4px 1px 1px;
  background: color-mix(in srgb, var(--vs-account-accent) 74%, var(--mist));
}

.ashtakavarga-chart > div > strong {
  color: var(--vs-account-ink);
  font-size: .68rem;
}

.ashtakavarga-board,
.ashtakavarga-grid {
  grid-template-columns: repeat(12, minmax(54px, 1fr));
  gap: 5px;
  max-width: 100%;
  padding: 1px 0 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.ashtakavarga-cell {
  min-height: 52px;
  border-radius: 6px;
  background: rgba(255, 252, 245, .7);
}

.ashtakavarga-board[data-style="north"] .ashtakavarga-cell {
  border-radius: 2px;
}

.ashtakavarga-table-wrap {
  max-width: 100%;
  max-height: 420px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
}

.ashtakavarga-table-wrap table {
  min-width: 680px;
  font-size: .72rem;
}

.ashtakavarga-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
}

.ashtakavarga-table-wrap th:first-child,
.ashtakavarga-table-wrap td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper);
}

.ashtakavarga-table-wrap thead th:first-child {
  z-index: 3;
}

.ashtakavarga-mobile-tabs {
  display: none;
}

@media (min-width: 761px) {
  .ashtakavarga-content:has(.ashtakavarga-board[data-mode="sav"]),
  .ashtakavarga-content:has(.ashtakavarga-board[data-mode="bav"]) {
    grid-template-columns: minmax(340px, 1fr) minmax(280px, .72fr);
    align-items: stretch;
  }

  .ashtakavarga-content:has(.ashtakavarga-board[data-mode="sav"]) [data-ashtaka-mobile-panel="map"][hidden],
  .ashtakavarga-content:has(.ashtakavarga-board[data-mode="sav"]) [data-ashtaka-mobile-panel="chart"][hidden],
  .ashtakavarga-content:has(.ashtakavarga-board[data-mode="bav"]) [data-ashtaka-mobile-panel="map"][hidden],
  .ashtakavarga-content:has(.ashtakavarga-board[data-mode="bav"]) [data-ashtaka-mobile-panel="chart"][hidden],
  .ashtakavarga-content:has(.ashtakavarga-board[data-mode="prastara"]) [data-ashtaka-mobile-panel="table"][hidden] {
    display: grid !important;
  }

  .ashtakavarga-content:has(.ashtakavarga-board[data-mode="sav"]) [data-ashtaka-mobile-panel="table"],
  .ashtakavarga-content:has(.ashtakavarga-board[data-mode="bav"]) [data-ashtaka-mobile-panel="table"],
  .ashtakavarga-content:has(.ashtakavarga-board[data-mode="prastara"]) [data-ashtaka-mobile-panel="map"],
  .ashtakavarga-content:has(.ashtakavarga-board[data-mode="prastara"]) [data-ashtaka-mobile-panel="chart"] {
    display: none !important;
  }

  .ashtakavarga-content:has(.ashtakavarga-board[data-mode="prastara"]) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container ashtakavarga (max-width: 760px) {
  .ashtakavarga-primary {
    grid-template-columns: minmax(0, 1fr);
  }

  .ashtakavarga-chart {
    min-height: 210px;
  }
}

/* Full-width workspace modes replace the old permanent local tabs. */
.workspace-catalog-mode {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: calc(100svh - var(--account-topbar-height) - var(--workspace-tool-dock-height) - 28px);
  padding: 0 0 14px;
  background: var(--vs-account-workspace-bg, color-mix(in srgb, var(--mist) 42%, var(--paper)));
}

.workspace-catalog-mode-header {
  position: sticky;
  top: calc(var(--account-topbar-height) + var(--workspace-tool-dock-height));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 48px;
  padding: 5px 2px;
  border-bottom: 1px solid var(--vs-account-line);
  background: var(--paper);
}

.workspace-catalog-mode-header > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.workspace-catalog-mode-header h2 {
  margin: 0;
  color: var(--vs-account-ink);
  font-family: Literata, Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.15;
}

.workspace-catalog-mode-header p {
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .7rem;
}

.workspace-catalog-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.workspace-catalog-close {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 750;
  cursor: pointer;
}

.workspace-catalog-mode .gallery-controls {
  padding: 8px;
  border-radius: 6px;
  background: rgba(255, 252, 245, .58);
}

.workspace-catalog-mode .varga-card,
.workspace-catalog-mode .yoga-card {
  box-shadow: none;
}

/* 1920 keeps the configured 2–5 column row model. */
@media (min-width: 1841px) {
  .workspace-row {
    grid-template-columns: repeat(var(--workspace-columns), minmax(0, 1fr));
  }
}

/* Around 1440 the account sidebar leaves room for two usable heavy widgets. */
@media (min-width: 901px) and (max-width: 1840px) {
  .workspace-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-row > .workspace-widget {
    grid-column: span 1 !important;
  }

  .workspace-row > .periods-panel:not(.varshaphala-widget-varshaphala-periods),
  .workspace-row > .planet-table-panel,
  .workspace-row > .ashtakavarga-panel,
  .workspace-row > .workspace-widget[data-widget-type="ashtakavarga"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1440px) {
  .account-topbar {
    padding-inline: 18px;
  }

  .account-main {
    padding-inline: 12px;
  }

  .workspace-tool-dock {
    grid-template-columns: minmax(166px, 208px) minmax(0, 1fr);
  }
}

@media (max-width: 1180px) {
  .account-main {
    padding: 10px 12px 88px;
  }

  .workspace-tool-dock {
    grid-template-columns: minmax(158px, 200px) minmax(0, 1fr);
  }

  .workspace-catalog-mode {
    min-height: calc(100svh - var(--account-topbar-height) - var(--workspace-tool-dock-height) - 90px);
  }
}

@media (max-width: 900px) {
  .workspace-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-row > .workspace-widget,
  .workspace-row > .periods-panel:not(.varshaphala-widget-varshaphala-periods),
  .workspace-row > .planet-table-panel,
  .workspace-row > .ashtakavarga-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .account-main {
    padding: 8px 10px 86px;
  }

  .workspace-page {
    gap: 6px;
  }

  .workspace-compact-header,
  .workspace-page > .workspace-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 46px;
    padding-block: 1px 3px;
  }

  .workspace-compact-title,
  .workspace-page > .workspace-heading > div {
    display: grid;
    gap: 1px;
  }

  .workspace-compact-header h1,
  .workspace-page > .workspace-heading h1 {
    font-size: 1.08rem;
  }

  .workspace-compact-header [data-current-chart-context],
  .workspace-page > .workspace-heading .workspace-context {
    overflow: hidden;
    font-size: .65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-compact-header .account-save-state,
  .workspace-page > .workspace-heading .account-save-state {
    font-size: .62rem;
  }

  .workspace-tool-dock {
    top: var(--account-topbar-height);
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 5px;
    min-height: 48px;
    margin-inline: 0;
    padding: 3px 0 4px;
  }

  .workspace-tool-context .active-chart-selector > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .workspace-tool-context select {
    width: 100%;
    min-height: 40px;
    font-size: .68rem;
  }

  .workspace-tool-list {
    width: auto;
    margin-inline: 0;
    padding: 1px 2px 3px;
  }

  .workspace-tool-main {
    min-width: 58px;
    padding-inline: 7px;
  }

  .workspace-tool-customize-button .workspace-tool-main {
    min-width: 76px;
  }

  .workspace-row-inserter {
    width: 30px;
    height: 30px;
    opacity: .72;
  }

  .workspace-widget-header {
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    gap: 5px;
    padding-right: 4px;
  }

  .workspace-widget-body {
    padding: 8px;
  }

  .workspace-widget-action-surface {
    display: grid;
    align-items: end;
    padding: 8px 8px calc(76px + env(safe-area-inset-bottom));
  }

  .workspace-widget-action-backdrop {
    background: rgba(16, 24, 25, .46);
  }

  .workspace-widget-action-panel,
  .workspace-widget-action-menu {
    position: relative;
    left: auto !important;
    top: auto !important;
    align-self: end;
    justify-self: stretch;
    width: 100%;
    max-height: min(calc(100svh - 100px - env(safe-area-inset-bottom)), 680px);
    padding: 8px;
    border-radius: 18px;
    box-shadow: 0 -18px 52px rgba(16, 24, 25, .22);
  }

  .workspace-widget-action-menu-content button,
  .workspace-widget-action-list button {
    min-height: 44px;
    padding-inline: 12px;
    font-size: .78rem;
  }

  .row-popover {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(calc(100svh - 100px - env(safe-area-inset-bottom)), 520px);
    padding: 14px;
    border-radius: 18px;
    box-shadow: 0 -18px 52px rgba(16, 24, 25, .2);
  }

  .widget-drawer,
  .mobile-action-sheet,
  .workspace-tool-customize {
    padding: 8px 8px calc(76px + env(safe-area-inset-bottom));
  }

  .widget-drawer-panel,
  .mobile-action-sheet-panel,
  .workspace-tool-customize-panel {
    max-height: min(calc(100svh - 92px - env(safe-area-inset-bottom)), 760px);
    border-radius: 18px;
  }

  .ashtakavarga-mobile-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ashtakavarga-mobile-tabs::-webkit-scrollbar {
    display: none;
  }

  .ashtakavarga-mobile-tabs button {
    flex: 1 0 auto;
    min-height: 40px;
  }

  .ashtakavarga-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: stretch;
  }

  .ashtakavarga-tabs,
  .ashtakavarga-style,
  .ashtakavarga-bav-tabs {
    flex-wrap: nowrap;
  }

  .workspace-catalog-mode-header {
    top: calc(var(--account-topbar-height) + var(--workspace-tool-dock-height));
    min-height: 46px;
  }

  .workspace-catalog-mode-header p {
    display: none;
  }

  .workspace-catalog-mode .gallery-controls {
    padding: 7px;
  }
}

@media (max-width: 390px) {
  .account-topbar {
    padding-inline: 10px;
  }

  .account-brand img {
    width: 116px;
    max-height: 38px;
  }

  .account-main {
    padding-inline: 8px;
  }

  .workspace-compact-header,
  .workspace-page > .workspace-heading {
    gap: 5px;
  }

  .workspace-tool-dock {
    grid-template-columns: 116px minmax(0, 1fr);
  }

  .workspace-tool-main {
    min-width: 54px;
    padding-inline: 6px;
  }

  .workspace-widget-header {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  .workspace-widget-source {
    display: none;
  }

  .periods-panel > .workspace-widget-body,
  .periods-body,
  .ashtakavarga-panel > .workspace-widget-body,
  .ashtakavarga-body {
    padding-inline: 8px;
  }

  .workspace-tool-choice-grid,
  .workspace-tool-action-grid,
  .workspace-tool-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Final v5 parity: Today uses page metadata, mobile folders and Ashtakavarga swipe. */
.today-transit-chart .chart-info,
.today-transit-chart .style-icon-button {
  display: none;
}

/* The transit code is already the complete chart name. Keep the large centre
   label and remove the smaller duplicate on the Today chart only. */
.today-transit-chart .chart-varga-name {
  display: none;
}

.today-transit-chart .chart-toolbar {
  justify-content: flex-end;
}

.cards-mobile-folder-manager {
  position: relative;
  min-width: 76px;
}

.cards-mobile-folder-manager > summary {
  border-color: var(--line) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  list-style: none;
}

.cards-mobile-folder-manager > summary::-webkit-details-marker {
  display: none;
}

.cards-mobile-folder-tree {
  padding: 8px;
  border-color: var(--line) !important;
  background: var(--paper) !important;
  box-shadow: 0 14px 34px rgba(48, 42, 33, .14);
}

.cards-mobile-folder-tree .cards-tree {
  padding: 0;
  border-right: 0;
  background: transparent;
}

.ashtakavarga-mobile-navigation {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.ashtakavarga-mobile-navigation p {
  margin: 0;
  color: var(--ink-soft);
  text-align: center;
  font-size: .72rem;
}

.ashtakavarga-mobile-navigation button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 760px) {
  .ashtakavarga-mobile-map-stage {
    min-height: 286px;
    overscroll-behavior-inline: contain;
  }

  .ashtakavarga-mobile-map-stage .ashtakavarga-mini-chart {
    width: min(100%, 330px);
    margin-inline: auto;
  }
}

/* Workspace v5 — dense modular sheets and section-level views. */
:root {
  --workspace-unit-height: clamp(430px, 42vw, 520px);
  --workspace-grid-gap: 8px;
  --workspace-widget-radius: 10px;
}

.workspace-page,
.workspace-canvas,
.workspace-grid,
.workspace-row-shell,
.workspace-row {
  background: var(--vs-account-bg, #f5f2ea);
}

.workspace-compact-header {
  min-height: 48px;
  padding-block: 8px;
}

.workspace-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.workspace-header-actions .workspace-sheet-settings-trigger {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .75rem;
}

.workspace-sheet-switcher {
  margin-bottom: 0;
  border-bottom: 1px solid var(--vs-account-line);
  background: var(--vs-account-bg, #f5f2ea);
}

.workspace-canvas {
  padding: var(--workspace-grid-gap);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.workspace-grid {
  display: block;
  width: 100%;
}

.workspace-row-shell {
  position: relative;
  margin: 0 0 var(--workspace-grid-gap);
  padding: 0;
  border: 0;
}

.workspace-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--workspace-columns, 3), minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: var(--workspace-unit-height);
  align-items: stretch;
  gap: var(--workspace-grid-gap);
  min-width: 0;
  padding: 0;
  border: 0;
}

.workspace-widget {
  position: relative;
  grid-column: span var(--widget-span-x, 1);
  grid-row: span var(--widget-span-y, 1);
  display: grid;
  grid-template-rows: 40px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--vs-account-line) 90%, transparent);
  border-radius: var(--workspace-widget-radius);
  background: var(--vs-account-surface, #fffdfa);
  box-shadow: none;
  transition: border-color .16s ease, opacity .16s ease;
}

.workspace-widget:hover,
.workspace-widget:focus-within {
  border-color: color-mix(in srgb, var(--vs-account-gold, #a48142) 42%, var(--vs-account-line));
}

.workspace-widget-header {
  min-height: 40px;
  height: 40px;
  padding: 0 8px;
  gap: 6px;
  overflow: hidden;
  border-bottom: 1px solid var(--vs-account-line);
  border-radius: var(--workspace-widget-radius) var(--workspace-widget-radius) 0 0;
  background: color-mix(in srgb, var(--vs-account-surface, #fffdfa) 94%, var(--vs-account-bg, #f5f2ea));
}

.workspace-widget-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-widget-title strong {
  font-size: .78rem;
  font-weight: 650;
}

.workspace-widget-drag-handle,
.workspace-widget-actions button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--vs-account-muted);
}

.workspace-widget-drag-handle {
  cursor: grab;
  touch-action: none;
}

.workspace-widget-drag-handle:active {
  cursor: grabbing;
}

.workspace-widget-drag-handle:disabled,
.workspace-widget-size-trigger:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.method-and-source {
  display: flex;
  min-width: 0;
  gap: 4px;
}

.workspace-widget-method,
.workspace-widget-source {
  padding: 2px 5px;
  font-size: .61rem;
  line-height: 1.2;
  white-space: nowrap;
}

.workspace-widget-body {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 8px 10px 10px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-radius: 0 0 var(--workspace-widget-radius) var(--workspace-widget-radius);
  background: transparent;
}

.workspace-widget-chart .workspace-widget-body {
  padding: 6px;
  overflow: hidden;
}

.workspace-widget .chart-viewer,
.workspace-widget .chart-panel,
.today-transit .chart-viewer,
.today-transit .chart-panel {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
}

.workspace-widget .chart-viewer,
.workspace-widget .chart-panel {
  height: 100%;
  min-height: 0;
}

.workspace-widget .chart-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.workspace-widget .chart-stage,
.workspace-widget .chart-render-area {
  min-width: 0;
  min-height: 0;
}

.workspace-widget-inserter,
.workspace-row-end-inserter {
  z-index: 12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--vs-account-gold, #a48142) 55%, var(--vs-account-line));
  border-radius: 999px;
  background: var(--vs-account-surface, #fffdfa);
  color: var(--vs-account-gold, #8b6b32);
  opacity: 0;
  box-shadow: 0 2px 8px rgba(25, 30, 28, .1);
  transition: opacity .14s ease, transform .14s ease;
}

.workspace-widget-inserter {
  position: absolute;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

.workspace-widget-inserter-right {
  top: 50%;
  right: -13px;
  transform: translateY(-50%) scale(.9);
}

.workspace-widget-inserter-bottom {
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%) scale(.9);
}

.workspace-widget:hover > .workspace-widget-inserter,
.workspace-widget:focus-within > .workspace-widget-inserter,
.workspace-widget-inserter:focus-visible {
  opacity: 1;
}

.workspace-widget:hover > .workspace-widget-inserter-right,
.workspace-widget:focus-within > .workspace-widget-inserter-right,
.workspace-widget-inserter-right:focus-visible {
  transform: translateY(-50%) scale(1);
}

.workspace-widget:hover > .workspace-widget-inserter-bottom,
.workspace-widget:focus-within > .workspace-widget-inserter-bottom,
.workspace-widget-inserter-bottom:focus-visible {
  transform: translateX(-50%) scale(1);
}

.workspace-row-end-inserter {
  position: absolute;
  right: 6px;
  bottom: -18px;
  gap: 5px;
  min-height: 26px;
  padding: 3px 9px;
  font-size: .68rem;
}

.workspace-row-shell:hover .workspace-row-end-inserter,
.workspace-row-shell:focus-within .workspace-row-end-inserter,
.workspace-row-end-inserter:focus-visible {
  opacity: 1;
}

.workspace-row-end-inserter:disabled {
  display: none;
}

.workspace-empty-sheet {
  min-height: 280px;
  border: 1px dashed var(--vs-account-line);
  background: transparent;
  box-shadow: none;
}

.widget-catalog-search {
  display: grid;
  gap: 5px;
  margin: 10px 0 14px;
  color: var(--vs-account-muted);
  font-size: .72rem;
}

.widget-catalog-search input {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 8px;
  background: var(--vs-account-surface, #fffdfa);
  color: var(--vs-account-ink);
  font: inherit;
}

/* Cards tree and compact rows. */
.charts-page {
  padding: 0;
}

.cards-page {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: calc(100svh - 82px);
  background: var(--vs-account-bg, #f5f2ea);
}

.cards-page--mobile {
  display: none;
}

.cards-tree {
  padding: 0;
  border-right: 0;
  background: transparent;
}

.cards-content-header,
.cards-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cards-content-header h1,
.cards-mobile-header h1 {
  max-width: none;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.28rem, 1.8vw, 1.62rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.cards-content-header > button,
.cards-mobile-header > button,
.cards-row-actions button,
.cards-mobile-controls button {
  min-height: 34px;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  background: var(--vs-account-surface, #fffdfa);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .72rem;
}

.cards-tree-section + .cards-tree-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--vs-account-line) 78%, transparent);
}

.cards-tree-section-header {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px;
}

.cards-tree-label {
  color: var(--vs-account-muted);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .68rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.cards-tree-add {
  display: grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--vs-account-surface, #fffdfa) 82%, transparent);
  color: var(--vs-account-muted);
  cursor: pointer;
}

.cards-tree-add:hover,
.cards-tree-add:focus-visible {
  border-color: color-mix(in srgb, var(--vs-account-gold, #a48142) 52%, var(--vs-account-line));
  color: var(--vs-account-gold, #8b6b32);
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 9%, var(--vs-account-surface, #fffdfa));
}

.cards-tree-list,
.cards-tree-list ul {
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
}

.cards-tree-system {
  margin-top: 2px;
}

.cards-tree-system .cards-tree-row {
  padding-left: 14px;
}

.cards-tree-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 36px;
  padding-left: calc(var(--cards-tree-depth, 0) * 14px);
  border-radius: 7px;
}

.cards-tree-toggle,
.cards-tree-toggle-spacer {
  display: grid;
  width: 22px;
  min-width: 22px;
  height: 32px;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--vs-account-muted);
}

.cards-tree-toggle {
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.cards-tree-toggle .cards-tree-icon {
  width: 14px;
  height: 14px;
  transition: transform .16s ease;
}

.cards-tree-toggle.is-collapsed .cards-tree-icon {
  transform: rotate(-90deg);
}

.cards-tree-icon {
  display: block;
  width: 17px;
  height: 17px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cards-tree-name {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 4px 8px;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .77rem;
  font-weight: 560;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.cards-tree-name span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cards-tree-name small {
  color: var(--vs-account-muted);
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
}

.cards-tree-row:hover .cards-tree-name:not(.is-active),
.cards-tree-name:focus-visible {
  background: color-mix(in srgb, var(--vs-account-ink) 4%, transparent);
}

.cards-tree-name.is-active {
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 14%, var(--vs-account-surface, #fffdfa));
  color: color-mix(in srgb, var(--vs-account-gold, #8b6b32) 80%, var(--vs-account-ink));
  box-shadow: inset 3px 0 0 var(--vs-account-gold, #a48142);
  font-weight: 700;
}

.cards-tree-folder-actions {
  display: flex;
  align-items: center;
  opacity: .22;
  transition: opacity .14s ease;
}

.cards-tree-row:hover .cards-tree-folder-actions,
.cards-tree-row:focus-within .cards-tree-folder-actions {
  opacity: 1;
}

.cards-tree-folder-actions button {
  display: grid;
  width: 28px;
  min-width: 28px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--vs-account-muted);
  cursor: pointer;
}

.cards-tree-folder-actions button:hover,
.cards-tree-folder-actions button:focus-visible {
  color: var(--vs-account-ink);
  background: color-mix(in srgb, var(--vs-account-ink) 6%, transparent);
}

.cards-tree-folder-actions .cards-tree-icon {
  width: 15px;
  height: 15px;
}

.cards-tree-folder.is-drop-target > .cards-tree-row,
.cards-tree-root.is-drop-target > .cards-tree-row {
  outline: 2px solid var(--vs-account-gold, #a48142);
}

.cards-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 16px clamp(12px, 2vw, 24px) 30px;
}

.cards-library-navigation {
  min-width: 0;
  margin: 8px 0 12px;
}

.cards-library-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
  padding-bottom: 2px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.cards-library-filters::-webkit-scrollbar {
  display: none;
}

.cards-library-filter {
  display: inline-grid;
  flex: 0 0 auto;
  grid-template-columns: 18px auto;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--vs-account-surface, #fffdfa) 64%, transparent);
  color: var(--vs-account-muted);
  font: inherit;
  font-size: .73rem;
  font-weight: 620;
  line-height: 1.2;
  cursor: pointer;
}

.cards-library-filter small {
  color: var(--vs-account-muted);
  font-size: .64rem;
  font-variant-numeric: tabular-nums;
}

.cards-library-filter:hover,
.cards-library-filter:focus-visible {
  border-color: color-mix(in srgb, var(--vs-account-gold, #a48142) 42%, var(--vs-account-line));
  color: var(--vs-account-ink);
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 7%, var(--vs-account-surface, #fffdfa));
}

.cards-library-filter.is-active {
  border-color: color-mix(in srgb, var(--vs-account-gold, #a48142) 52%, var(--vs-account-line));
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 13%, var(--vs-account-surface, #fffdfa));
  color: color-mix(in srgb, var(--vs-account-gold, #8b6b32) 76%, var(--vs-account-ink));
  box-shadow: inset 3px 0 0 var(--vs-account-gold, #a48142);
}

.cards-library-folder-chip {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--vs-account-surface, #fffdfa) 64%, transparent);
  color: var(--vs-account-muted);
  overflow: hidden;
}

.cards-library-folder-select {
  display: inline-grid;
  grid-template-columns: 18px minmax(0, auto);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  padding: 5px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .73rem;
  font-weight: 620;
  cursor: pointer;
}

.cards-library-folder-select > span {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cards-library-folder-select small {
  color: var(--vs-account-muted);
  font-size: .64rem;
  font-variant-numeric: tabular-nums;
}

.cards-library-folder-menu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  width: 26px;
  min-width: 26px;
  min-height: 100%;
  padding: 0;
  place-items: center;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--vs-account-line) 72%, transparent);
  background: var(--vs-account-surface, #fffdfa);
  color: var(--vs-account-muted);
  font: inherit;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}

.cards-library-folder-chip:hover .cards-library-folder-menu,
.cards-library-folder-chip:focus-within .cards-library-folder-menu {
  opacity: 1;
  pointer-events: auto;
}

.cards-library-folder-chip:hover,
.cards-library-folder-chip:focus-within {
  border-color: color-mix(in srgb, var(--vs-account-gold, #a48142) 45%, var(--vs-account-line));
  color: var(--vs-account-ink);
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 7%, var(--vs-account-surface, #fffdfa));
}

.cards-library-folder-chip.is-active {
  border-color: color-mix(in srgb, var(--vs-account-gold, #a48142) 52%, var(--vs-account-line));
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 13%, var(--vs-account-surface, #fffdfa));
  color: color-mix(in srgb, var(--vs-account-gold, #8b6b32) 76%, var(--vs-account-ink));
  box-shadow: inset 3px 0 0 var(--vs-account-gold, #a48142);
}

.cards-library-add-folder {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  background: var(--vs-account-surface, #fffdfa);
  color: var(--vs-account-muted);
  cursor: pointer;
}

.cards-library-add-folder:hover,
.cards-library-add-folder:focus-visible,
.cards-library-folder-menu:hover,
.cards-library-folder-menu:focus-visible {
  color: var(--vs-account-gold, #8b6b32);
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 8%, var(--vs-account-surface, #fffdfa));
}

.cards-library-add-folder .cards-tree-icon {
  width: 16px;
  height: 16px;
}

.cards-source-tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 8px;
  border-bottom: 1px solid var(--vs-account-line);
}

.cards-source-tabs button {
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--vs-account-muted);
}

.cards-source-tabs button[aria-selected="true"] {
  border-bottom-color: var(--vs-account-gold, #a48142);
  color: var(--vs-account-ink);
}

.cards-mobile-folder select,
.cards-row-actions select {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--vs-account-line);
  background: var(--vs-account-surface, #fffdfa);
  color: var(--vs-account-ink);
  font: inherit;
}

.cards-list,
.cards-mobile-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--vs-account-line);
}

.cards-list-row,
.cards-mobile-row {
  display: grid;
  grid-template-columns: minmax(0, 708px) auto;
  justify-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px 6px;
  border: 0;
  border-bottom: 1px solid var(--vs-account-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cards-list-row.is-dragging,
.cards-mobile-row.is-dragging {
  opacity: .58;
}

.cards-folder-row {
  min-height: 50px;
  padding-block: 4px;
}

.cards-folder-row:hover,
.cards-folder-row:focus-within {
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 5%, transparent);
}

.cards-folder-open {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cards-folder-open:focus-visible {
  outline: 2px solid var(--vs-account-gold, #a48142);
  outline-offset: -2px;
}

.cards-folder-open > .cards-tree-icon:first-child {
  width: 20px;
  height: 20px;
  color: color-mix(in srgb, var(--vs-account-gold, #8b6b32) 72%, var(--vs-account-muted));
}

.cards-folder-open > .cards-tree-icon:last-child {
  width: 15px;
  height: 15px;
  color: var(--vs-account-muted);
}

.cards-folder-open > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.cards-folder-open strong {
  overflow: hidden;
  font-size: .78rem;
  font-weight: 680;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cards-folder-open small {
  color: var(--vs-account-muted);
  font-size: .65rem;
  line-height: 1.2;
}

.cards-folder-row-actions {
  display: flex;
  align-items: center;
  opacity: .28;
  transition: opacity .14s ease;
}

.cards-folder-row:hover .cards-folder-row-actions,
.cards-folder-row:focus-within .cards-folder-row-actions {
  opacity: 1;
}

.cards-folder-row-actions button {
  display: grid;
  width: 32px;
  min-width: 32px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--vs-account-muted);
  cursor: pointer;
}

.cards-folder-row-actions button:hover,
.cards-folder-row-actions button:focus-visible {
  background: color-mix(in srgb, var(--vs-account-ink) 6%, transparent);
  color: var(--vs-account-ink);
}

.cards-folder-row-actions .cards-tree-icon {
  width: 15px;
  height: 15px;
}

.cards-library-filter.is-drop-target,
.cards-library-folder-chip.is-drop-target {
  outline: 2px solid var(--vs-account-gold, #a48142);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 10%, transparent);
}

.cards-row-primary {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(220px, 270px);
  align-items: center;
  justify-content: start;
  gap: 18px;
  max-width: 708px;
  min-width: 0;
}

.cards-row-identity {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cards-row-name {
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 580;
  line-height: 1.35;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cards-row-meta,
.cards-row-astro,
.cards-row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--vs-account-muted);
  font-size: .84rem;
  line-height: 1.4;
}

.cards-delete-action {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 5px;
  margin-left: 5px;
  padding: 6px 9px;
  border-color: transparent !important;
  border-left-color: var(--vs-account-line) !important;
  border-radius: 0 7px 7px 0 !important;
  background: transparent !important;
  color: var(--vs-account-muted) !important;
  cursor: pointer;
}

.cards-delete-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.cards-delete-action:hover,
.cards-delete-action:focus-visible {
  border-left-color: color-mix(in srgb, #b42318 35%, var(--vs-account-line)) !important;
  background: color-mix(in srgb, #b42318 8%, transparent) !important;
  color: #a41f17 !important;
  outline: 2px solid color-mix(in srgb, #b42318 34%, transparent);
  outline-offset: 1px;
}

.chart-delete-dialog:not([hidden]) {
  position: fixed;
  z-index: 175;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
}

.chart-delete-dialog > .workspace-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(16, 24, 25, .5);
}

.chart-delete-panel {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  padding: 22px;
  border: 1px solid var(--vs-account-line);
  border-radius: 14px;
  background: var(--workspace-surface, #fffdfa);
  box-shadow: 0 24px 62px rgba(16, 24, 25, .25);
  outline: none;
}

.chart-delete-panel h2 { margin: 0; font-size: 1.08rem; }
.chart-delete-panel p { margin: 10px 0 0; color: var(--vs-account-muted); font-size: .78rem; line-height: 1.55; }
.chart-delete-panel .chart-delete-error { color: #a41f17; }
.chart-delete-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.chart-delete-actions button {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}
.chart-delete-actions .chart-delete-confirm {
  border-color: #a41f17;
  background: #a41f17;
  color: #fff;
}
.chart-delete-actions button:focus-visible { outline: 3px solid color-mix(in srgb, var(--vs-account-gold, #a48142) 35%, transparent); outline-offset: 2px; }
.chart-delete-actions button:disabled { cursor: wait; opacity: .66; }

.cards-row-meta span,
.cards-row-astro span {
  white-space: nowrap;
}

.cards-row-meta > :not(:first-child)::before {
  content: "·";
  margin-right: 7px;
  color: color-mix(in srgb, var(--vs-account-muted) 52%, transparent);
}

.cards-row-astro {
  display: grid;
  align-items: center;
  gap: 2px;
  padding: 7px 12px;
  border-left: 1px solid color-mix(in srgb, var(--vs-account-green, #17695f) 16%, var(--vs-account-line));
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--vs-account-green, #17695f) 4%, transparent);
  color: color-mix(in srgb, var(--vs-account-muted) 86%, var(--vs-account-ink));
  font-size: .83rem;
}

.cards-row-astro span {
  color: color-mix(in srgb, var(--vs-account-green, #17695f) 70%, var(--vs-account-ink));
  font-weight: 610;
}

.cards-row-astro .cards-source-label {
  color: var(--vs-account-muted);
  font-size: .69rem;
  font-weight: 540;
}

.cards-row-actions details { position: relative; }
.cards-row-actions summary { cursor: pointer; list-style: none; }
.cards-row-actions details > div {
  position: absolute;
  z-index: 20;
  top: 30px;
  right: 0;
  display: grid;
  width: 190px;
  padding: 7px;
  border: 1px solid var(--vs-account-line);
  border-radius: 8px;
  background: var(--vs-account-surface, #fffdfa);
}

.cards-source-notice,
.cards-empty {
  padding: 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 8px;
  background: transparent;
  color: var(--vs-account-muted);
  font-size: .75rem;
}

/* Today compact dashboard. */
.today-page,
.knowledge-page {
  padding: 0;
}

.today-dashboard,
.knowledge-page[data-knowledge-view] {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(14px, 2.2vw, 28px);
}

.today-dashboard-header,
.today-transit > header,
.today-personal > header,
.today-essence > header,
.today-timeline > header,
.today-panchanga > header,
.knowledge-page-header,
.knowledge-observations > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.today-dashboard-header {
  align-items: center;
  margin-bottom: 12px;
}

.today-dashboard-header h1,
.knowledge-page-header h1 {
  margin: 0;
  font-size: clamp(1.85rem, 3.2vw, 2.7rem);
  line-height: 1;
}

.today-transit h2,
.today-panchanga h2,
.today-personal h2,
.today-essence h2,
.today-timeline h2,
.knowledge-page h2,
.knowledge-page h3,
.knowledge-page h4 {
  margin: 0;
  font-family: inherit;
  line-height: 1.2;
}

.today-transit h2,
.today-panchanga h2,
.today-personal h2,
.today-essence h2,
.today-timeline h2,
.knowledge-page h2 {
  font-size: 1rem;
}

.knowledge-page h3 { font-size: .86rem; }
.knowledge-page h4 { font-size: .75rem; }

.today-dashboard-header p,
.today-transit header p,
.today-personal header p,
.today-essence header p,
.today-timeline header p,
.today-panchanga header p {
  margin: 0;
}

.today-dashboard-kicker,
.knowledge-eyebrow {
  color: var(--vs-account-gold, #8b6b32);
  font-size: .68rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.today-dashboard-primary,
.today-dashboard-secondary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.today-transit,
.today-panchanga,
.today-personal,
.today-essence,
.today-timeline {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--vs-account-line);
  border-radius: 10px;
  background: var(--vs-account-surface, #fffdfa);
  box-shadow: none;
}

.today-transit-slot {
  height: clamp(330px, 34vw, 455px);
  margin-top: 8px;
  overflow: hidden;
}

.today-transit-slot > p { display: none; }
.today-transit-chart { height: 100%; }
.today-transit-chart .chart-panel { height: 100%; overflow: hidden; }

.today-chart-style {
  display: flex;
  gap: 3px;
}

.today-chart-style button,
.today-dashboard-header button,
.knowledge-page-tabs button,
.knowledge-observations button {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
  background: transparent;
  color: var(--vs-account-ink);
}

.today-chart-style button[aria-checked="true"] {
  border-color: var(--vs-account-gold, #a48142);
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 10%, transparent);
}

.today-panchanga-grid,
.today-personal-primary,
.today-personal-lords dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 8px 0 0;
}

.today-panchanga-grid > div,
.today-personal-primary > div,
.today-personal-lords dl > div {
  display: grid;
  grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr);
  gap: 7px;
  padding: 6px 0;
  border-bottom: 1px solid var(--vs-account-line);
}

.today-panchanga-grid dt,
.today-personal-primary dt,
.today-personal-lords dt {
  color: var(--vs-account-muted);
  font-size: .7rem;
}

.today-panchanga-grid dd,
.today-personal-primary dd,
.today-personal-lords dd {
  margin: 0;
  font-size: .75rem;
}

.today-status-note,
.today-essence-disclosure {
  color: var(--vs-account-muted);
  font-size: .68rem;
}

.today-essence-conclusion {
  padding: 7px 0;
  border-bottom: 1px solid var(--vs-account-line);
}

.today-essence-conclusion summary {
  display: grid;
  gap: 3px;
  cursor: pointer;
}

.today-timeline-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
}

.today-timeline-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  padding: 7px;
  border-left: 2px solid var(--vs-account-gold, #a48142);
  background: color-mix(in srgb, var(--vs-account-bg, #f5f2ea) 68%, transparent);
}

.today-timeline-list small,
.today-timeline-list strong { display: block; }

/* Editorial Knowledge, not a uniform card gallery. */
.knowledge-page-header {
  display: grid;
  margin-bottom: 16px;
}

.knowledge-page-header > p { margin: 0; }

.knowledge-page-tabs {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  border-bottom: 1px solid var(--vs-account-line);
}

.knowledge-page-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.knowledge-page-tabs button[aria-selected="true"] {
  border-bottom-color: var(--vs-account-gold, #a48142);
}

.knowledge-featured,
.knowledge-continue,
.knowledge-classics,
.knowledge-methods,
.knowledge-topics,
.knowledge-authors,
.knowledge-updates,
.knowledge-observations {
  margin-bottom: 18px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--vs-account-line);
  background: transparent;
  box-shadow: none;
}

.knowledge-featured article {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr);
  gap: 20px;
  padding: clamp(16px, 3vw, 34px);
  border: 1px solid var(--vs-account-line);
  background: var(--vs-account-surface, #fffdfa);
}

.knowledge-editorial-columns,
.knowledge-editorial-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.knowledge-continue ul,
.knowledge-classics ol,
.knowledge-methods ul,
.knowledge-updates ol,
.knowledge-authors ul,
.knowledge-topics ul,
.knowledge-observation-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.knowledge-continue li,
.knowledge-classics li,
.knowledge-methods li,
.knowledge-updates li,
.knowledge-authors li {
  padding: 9px 0;
  border-bottom: 1px solid var(--vs-account-line);
}

.knowledge-topics > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.knowledge-topics button,
.observation-tags button {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--vs-account-gold, #8b6b32);
  text-align: left;
}

.publication-metadata {
  font-size: .72rem;
}

.knowledge-observation-filters {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(6, minmax(115px, 1fr)) auto;
  gap: 6px;
  margin: 12px 0;
}

.knowledge-observation-filters label {
  display: grid;
  gap: 3px;
  color: var(--vs-account-muted);
  font-size: .66rem;
}

.knowledge-observation-filters input,
.knowledge-observation-filters select {
  min-height: 36px;
  padding: 6px;
  border: 1px solid var(--vs-account-line);
  background: var(--vs-account-surface, #fffdfa);
}

.knowledge-observation {
  padding: 14px 0;
  border-bottom: 1px solid var(--vs-account-line);
}

.knowledge-observation > header,
.observation-argument-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
}

.observation-argument-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Professional Yogas 1×1. */
.yogas-widget .workspace-widget-body {
  padding: 0;
  overflow: hidden;
}

.yogas-view,
.yoga-inspector {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.yogas-view {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.yoga-view-local-header {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 9px;
  border-bottom: 1px solid var(--vs-account-line);
  background: var(--vs-account-surface, #fffdfa);
}

.yoga-view-local-header strong { margin-right: auto; font-size: .78rem; }
.yoga-view-local-header button,
.yoga-view-local-header span {
  min-height: 26px;
  padding: 4px 7px;
  border: 1px solid var(--vs-account-line);
  border-radius: 5px;
  background: transparent;
  font-size: .65rem;
}

.yoga-view-system-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 5px 9px 0;
  border-bottom: 1px solid var(--vs-account-line);
}

.yoga-view-system-tabs button {
  min-height: 28px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--vs-account-muted);
  font-size: .66rem;
}

.yoga-view-system-tabs button[aria-selected="true"] {
  border-bottom-color: var(--vs-account-teal, #176b66);
  color: var(--vs-account-ink);
  font-weight: 700;
}

.yoga-view-header,
.yoga-view-filters,
.yoga-view-method-note,
.yoga-view-mock-note {
  padding-inline: 9px;
}

.yoga-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  border-bottom: 1px solid var(--vs-account-line);
}

.yoga-view-header p,
.yoga-view-header h2,
.yoga-view-mock-note,
.yoga-view-method-note {
  margin: 0;
}

.yoga-view-header h2 { font-size: .78rem; }
.yoga-view-header span,
.yoga-view-mock-note,
.yoga-view-method-note { color: var(--vs-account-muted); font-size: .62rem; }

.yoga-view-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(66px, 1fr)) minmax(70px, 1fr) 28px;
  gap: 4px;
  padding-block: 6px;
  border-bottom: 1px solid var(--vs-account-line);
}

.yoga-view-filters select,
.yoga-view-filters input {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 4px 5px;
  border: 1px solid var(--vs-account-line);
  border-radius: 5px;
  background: var(--vs-account-surface, #fffdfa);
  font: inherit;
  font-size: .64rem;
}

.yoga-view-help {
  min-height: 30px;
  border: 1px solid var(--vs-account-line);
  border-radius: 5px;
  background: transparent;
}

.yoga-view-scroll {
  min-height: 0;
  overflow: auto;
}

.yoga-view-category-sticky {
  position: sticky;
  z-index: 2;
  top: 0;
  margin: 0;
  padding: 5px 9px;
  border-bottom: 1px solid var(--vs-account-line);
  background: var(--vs-account-surface, #fffdfa);
  color: var(--vs-account-muted);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.yoga-view-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--vs-account-line);
  cursor: pointer;
  font-size: .7rem;
}

.yoga-view-row:hover,
.yoga-view-row:focus,
.yoga-view-row.is-selected {
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 9%, transparent);
  outline: 0;
}

.yoga-view-row-status { color: var(--vs-account-muted); font-size: .62rem; }
.yoga-view-row-reference {
  display: inline-block;
  margin-left: 6px;
  color: var(--vs-account-teal, #176b66);
  font-size: .6rem;
  font-weight: 700;
}

.yoga-view-row-summary {
  display: block;
  margin-top: 2px;
  color: var(--vs-account-muted);
  font-size: .62rem;
}

.yoga-view-page { padding: 10px; font-size: .7rem; }
.yoga-view-page h3 { margin: 10px 0; font-size: .92rem; }
.yoga-view-page h4 { margin: 12px 0 5px; font-size: .72rem; }
.yoga-view-page ul { margin: 0; padding-left: 18px; }
.yoga-view-page li { margin-bottom: 5px; }
.yoga-view-back { border: 0; background: transparent; color: var(--vs-account-teal, #176b66); font-weight: 700; }
.yoga-view-formula { padding: 8px; border-radius: 6px; background: color-mix(in srgb, var(--vs-account-teal, #176b66) 7%, transparent); }
.yoga-view-detail-actions { display: flex; gap: 6px; margin-top: 12px; }
.yoga-view-detail-actions button,
.yoga-view-chart-list button,
.yoga-view-source-list button {
  min-height: 32px;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
  background: var(--vs-account-surface, #fffdfa);
}
.yoga-view-chart-list,
.yoga-view-source-list { display: grid; gap: 5px; }
.yoga-view-chart-list button,
.yoga-view-source-list button { display: grid; gap: 2px; padding: 8px; text-align: left; }
.yoga-view-chart-list button[aria-current="true"] { border-color: var(--vs-account-teal, #176b66); }
.yoga-view-chart-list span,
.yoga-view-source-list span { color: var(--vs-account-muted); font-size: .62rem; }
.yoga-view-suppression { padding: 7px; border-left: 3px solid var(--vs-account-gold, #a48142); background: color-mix(in srgb, var(--vs-account-gold, #a48142) 8%, transparent); }

.yoga-inspector {
  position: absolute;
  z-index: 30;
  inset: 40px 0 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 0 0 var(--workspace-widget-radius) var(--workspace-widget-radius);
  background: var(--vs-account-surface, #fffdfa);
}

.yoga-inspector-header,
.yoga-inspector-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--vs-account-line);
}

.yoga-inspector-header h2 { margin: 0; font-size: .88rem; }
.yoga-inspector-header span,
.yoga-inspector-mock-note { color: var(--vs-account-muted); font-size: .64rem; }
.yoga-inspector-mock-note { margin: 0; padding: 6px 8px; }
.yoga-inspector-scroll { min-height: 0; padding: 8px; overflow: auto; }
.yoga-inspector-section h3,
.yoga-inspector-checks h3 { margin: 8px 0 4px; font-size: .72rem; }
.yoga-inspector-scroll p,
.yoga-inspector-scroll li,
.yoga-inspector-scroll dd,
.yoga-inspector-scroll dt { font-size: .68rem; }
.yoga-inspector-check-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.yoga-inspector-actions { border-top: 1px solid var(--vs-account-line); border-bottom: 0; }
.yoga-inspector-actions button { min-height: 32px; border: 1px solid var(--vs-account-gold, #a48142); border-radius: 6px; background: transparent; }
.yoga-inspector-actions span { color: var(--vs-account-muted); font-size: .62rem; }
.chart-viewer.is-yoga-highlighted { outline: 3px solid color-mix(in srgb, var(--vs-account-gold, #a48142) 80%, transparent); outline-offset: -3px; }

/* Professional transit facts and timelines. */
.transits-widget .workspace-widget-body {
  padding: 0;
  overflow: hidden;
}

.transits-view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
}

.transits-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--vs-account-line);
}

.transits-view-header p,
.transits-view-header h2,
.transits-view-header small { margin: 0; }
.transits-view-header h2 { font-size: .84rem; }
.transits-view-header p,
.transits-view-header small,
.transits-status-badge { color: var(--vs-account-muted); font-size: .64rem; }

.transits-view-content {
  min-height: 0;
  overflow: auto;
}

.transits-planet-selector {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  gap: 3px;
  padding: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--vs-account-line);
  background: var(--vs-account-surface, #fffdfa);
}

.transits-planet-selector button {
  min-width: 42px;
  min-height: 30px;
  border: 1px solid var(--vs-account-line);
  border-radius: 5px;
  background: transparent;
}

.transits-planet-selector button.is-selected {
  border-color: var(--vs-account-gold, #a48142);
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 10%, transparent);
}

.transits-facts-table,
.transits-exact-aspects table {
  width: 100%;
  border-collapse: collapse;
  font-size: .68rem;
}

.transits-facts-table th,
.transits-facts-table td,
.transits-exact-aspects th,
.transits-exact-aspects td {
  padding: 6px;
  border-bottom: 1px solid var(--vs-account-line);
  text-align: left;
}

.transit-direction {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}

.transit-planet-detail {
  padding: 8px 10px;
}

.transit-planet-detail > header,
.transit-planet-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.transit-planet-detail-grid > div {
  display: grid;
  grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr);
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--vs-account-line);
  font-size: .68rem;
}

.transit-planet-detail-grid dd { margin: 0; }
.transits-events ol,
.transits-timeline ol { margin: 0; padding: 0; list-style: none; }
.transits-events li,
.transits-timeline li { display: grid; grid-template-columns: auto 24px minmax(0, 1fr); gap: 7px; padding: 8px; border-bottom: 1px solid var(--vs-account-line); font-size: .7rem; }
.transits-model-metadata,
.transits-collection-note { margin: 0; padding: 6px 10px; color: var(--vs-account-muted); font-size: .62rem; }

@media (max-width: 1100px) {
  :root { --workspace-unit-height: 460px; }

  .cards-row-primary {
    grid-template-columns: minmax(0, 1fr);
  }

  .cards-row-astro {
    width: fit-content;
    max-width: 100%;
  }

  .knowledge-observation-filters {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
}

@media (max-width: 760px) {
  :root {
    --workspace-unit-height: 430px;
    --workspace-grid-gap: 6px;
  }

  .workspace-compact-header {
    align-items: flex-start;
  }

  .workspace-header-actions {
    display: grid;
    justify-items: end;
    gap: 4px;
  }

  .workspace-header-actions .workspace-sheet-settings-trigger {
    min-height: 40px;
  }

  .workspace-sheet-tabs { display: none !important; }
  .workspace-sheet-mobile { display: grid !important; }

  .workspace-canvas { padding: 6px 0; }
  .workspace-row-shell { margin-bottom: 12px; }
  .workspace-row {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 6px;
  }

  .workspace-widget {
    grid-column: 1 !important;
    grid-row: auto !important;
    height: min(var(--workspace-unit-height), calc(100svh - 150px));
    min-height: 390px;
    border-radius: 8px;
  }

  .workspace-widget[data-widget-type="timeline"],
  .workspace-widget[data-widget-type="notes"],
  .workspace-widget[data-widget-type="question"] {
    min-height: 300px;
    height: auto;
    max-height: 430px;
  }

  .workspace-widget[data-widget-type="ashtakavarga"],
  .workspace-widget[data-widget-type="transit-ashtakavarga"],
  .workspace-widget[data-widget-type="planet-table"] {
    height: auto;
    max-height: min(620px, calc(100svh - 120px));
  }

  .workspace-widget-header {
    padding-inline: 5px;
  }

  .workspace-widget-method,
  .workspace-widget-source {
    display: none;
  }

  .workspace-widget-drag-handle,
  .workspace-widget-actions button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .workspace-widget-inserter-right {
    top: 4px;
    right: 88px;
    width: 32px;
    height: 32px;
    opacity: 1;
    transform: none;
    box-shadow: none;
  }

  .workspace-widget-inserter-bottom { display: none; }

  .workspace-row-end-inserter {
    position: static;
    grid-column: 1;
    justify-self: center;
    width: auto;
    min-height: 36px;
    margin: 2px 0 4px;
    opacity: 1;
    box-shadow: none;
  }

  .workspace-widget-action-panel {
    max-height: min(70svh, 560px);
    overflow: auto;
  }

  .cards-page--desktop { display: none; }
  .cards-page--mobile {
    display: block;
    min-height: calc(100svh - 120px);
    padding: 12px 10px 84px;
  }

  .cards-library-navigation {
    margin-block: 8px 10px;
  }

  .cards-library-filters {
    flex-wrap: nowrap;
    padding-bottom: 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .cards-library-filter,
  .cards-library-folder-chip,
  .cards-library-add-folder {
    flex: 0 0 auto;
    min-height: 40px;
  }

  .cards-library-filter {
    padding-inline: 9px;
  }

  .cards-library-folder-select,
  .cards-library-folder-menu {
    min-height: 40px;
  }

  .cards-library-add-folder {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .cards-mobile-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin-top: 10px;
  }

  .cards-mobile-folder {
    display: grid;
    gap: 3px;
    color: var(--vs-account-muted);
    font-size: .68rem;
  }

  .cards-mobile-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 0;
  }

  .cards-mobile-row.cards-folder-row {
    min-height: 54px;
    padding-block: 3px;
  }

  .cards-mobile-row .cards-folder-open {
    min-height: 48px;
  }

  .cards-mobile-row .cards-folder-row-actions {
    opacity: .65;
  }

  .cards-mobile-row .cards-folder-row-actions button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .cards-mobile-row .cards-row-primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .cards-mobile-row .cards-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 9px;
  }

  .cards-mobile-row .cards-row-astro { display: flex; }
  .cards-mobile-row .cards-row-actions { align-items: stretch; gap: 9px; }
  .cards-mobile-row .cards-delete-action {
    min-width: 92px;
    min-height: 44px;
    justify-content: center;
    margin-left: 4px;
    padding: 8px 10px;
    border: 1px solid var(--vs-account-line) !important;
    border-radius: 8px !important;
    color: #8f241e !important;
  }
  .cards-row-actions details > div { position: fixed; right: 10px; bottom: 80px; top: auto; width: calc(100vw - 20px); }

  .chart-delete-dialog:not([hidden]) { align-items: end; padding: 8px 8px calc(76px + env(safe-area-inset-bottom)); }
  .chart-delete-panel { padding: 20px 16px; border-radius: 16px; }
  .chart-delete-actions { display: grid; grid-template-columns: 1fr; }
  .chart-delete-actions button { min-height: 48px; }

  .today-dashboard,
  .knowledge-page[data-knowledge-view] { padding: 12px 10px 84px; }
  .today-dashboard-primary,
  .today-dashboard-secondary { grid-template-columns: minmax(0, 1fr); }
  .today-transit-slot { height: min(410px, calc(100svh - 210px)); }
  .today-panchanga-grid,
  .today-personal-primary,
  .today-personal-lords dl { grid-template-columns: minmax(0, 1fr); }
  .today-timeline-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .today-timeline-list li { flex: 0 0 210px; scroll-snap-align: start; }

  .knowledge-featured article,
  .knowledge-editorial-columns,
  .knowledge-editorial-footer,
  .knowledge-topics > div,
  .observation-argument-columns { grid-template-columns: minmax(0, 1fr); }
  .knowledge-observation-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-observation > header { grid-template-columns: minmax(0, 1fr); }

  .yoga-view-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yoga-view-help { min-height: 38px; }
  .yoga-inspector-check-columns { grid-template-columns: minmax(0, 1fr); }

  .transits-facts-table thead,
  .transits-exact-aspects thead { display: none; }
  .transits-facts-table tbody,
  .transits-facts-table tr,
  .transits-facts-table td,
  .transits-facts-table th,
  .transits-exact-aspects tbody,
  .transits-exact-aspects tr,
  .transits-exact-aspects td { display: block; }
  .transits-facts-table tr,
  .transits-exact-aspects tr { padding: 8px; border-bottom: 1px solid var(--vs-account-line); }
  .transits-facts-table td,
  .transits-exact-aspects td { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 6px; border: 0; }
  .transits-facts-table td::before,
  .transits-exact-aspects td::before { content: attr(data-label); color: var(--vs-account-muted); }
  .transit-planet-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-widget,
  .workspace-widget-inserter,
  .workspace-row-end-inserter {
    transition: none !important;
    animation: none !important;
  }
}

/* Professional workspace v4: shared presentation for Today and domain views. */
.modal-layer {
  display: contents;
}

.today-page {
  gap: 14px;
}

.today-section,
.today-period-notice {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper) 92%, var(--mist));
}

.today-section {
  padding: clamp(16px, 2vw, 24px);
}

.today-section-heading,
.today-period-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.today-section-heading span,
.today-period-notice span,
.today-personal-summary article > span {
  color: var(--teal);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.today-section-heading h2 {
  margin: 2px 0 0;
  font-family: Literata, Georgia, serif;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  font-weight: 600;
}

.today-section-heading > p,
.today-period-notice p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .75rem;
}

.today-panchanga-grid,
.today-lord-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 18px 0 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.today-panchanga-grid > div,
.today-lord-grid > div {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  min-height: 78px;
  padding: 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.today-panchanga-grid dt,
.today-lord-grid dt {
  color: var(--ink-soft);
  font-size: .68rem;
}

.today-panchanga-grid dd,
.today-lord-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
}

.today-personal-heading {
  align-items: end;
}

.today-source-select {
  display: grid;
  gap: 4px;
  min-width: 220px;
  color: var(--ink-soft);
  font-size: .7rem;
  font-weight: 700;
}

.today-source-select select {
  width: 100%;
  min-height: 38px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.today-personal-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 18px;
  border: 1px solid var(--line);
}

.today-personal-summary article {
  min-width: 0;
  padding: 14px;
  border-right: 1px solid var(--line);
}

.today-personal-summary article:last-child {
  border-right: 0;
}

.today-personal-summary strong {
  display: block;
  margin: 7px 0 4px;
  font-size: .9rem;
}

.today-personal-summary p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .76rem;
}

.today-lord-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
}

.today-essence {
  border-color: color-mix(in srgb, var(--gold) 42%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent 36%),
    var(--paper);
}

.today-rule-badge {
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--line));
  border-radius: 999px;
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}

.today-essence-lead {
  max-width: 920px;
  margin: 16px 0;
  font-family: Literata, Georgia, serif;
  font-size: clamp(1rem, 1.5vw, 1.24rem);
  line-height: 1.55;
}

.today-rule-chain {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.today-rule-chain summary {
  color: var(--teal);
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}

.today-rule-chain ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 12px 0 0;
  padding: 1px;
  list-style: none;
  background: var(--line);
}

.today-rule-chain li {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  background: var(--paper);
}

.today-rule-chain li strong {
  color: var(--ink-soft);
  font-size: .66rem;
  text-transform: uppercase;
}

.today-rule-chain li span {
  font-size: .76rem;
}

.today-period-notice {
  padding: 14px 16px;
}

.today-period-notice strong {
  display: block;
  margin-top: 2px;
  font-size: .88rem;
}

.today-period-notice button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 12%, var(--paper));
  color: var(--ink);
  font: inherit;
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
}

.method-and-source {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.workspace-widget-method,
.workspace-widget-source {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: .62rem;
  font-weight: 750;
  white-space: nowrap;
}

.workspace-widget-method {
  border-color: color-mix(in srgb, var(--gold) 38%, var(--line));
  background: color-mix(in srgb, var(--gold) 7%, transparent);
}

.workspace-widget {
  position: relative;
  overflow: visible;
  transition: opacity .16s ease, box-shadow .16s ease;
}

.workspace-widget.is-collapsed .workspace-widget-header {
  border-bottom: 0;
}

.workspace-widget-inserter {
  position: absolute;
  z-index: 8;
  top: 50%;
  right: -11px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line));
  border-radius: 50%;
  background: var(--paper);
  color: var(--gold);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .16s ease, transform .16s ease;
}

.workspace-widget:hover > .workspace-widget-inserter,
.workspace-widget:focus-within > .workspace-widget-inserter,
.workspace-widget-inserter:focus-visible {
  opacity: 1;
  transform: translateY(-50%) scale(1.04);
}

.workspace-widget-chart .chart-meta-line {
  display: none;
}

.widget-catalog button[data-widget-status="planned"] {
  display: grid;
  justify-items: start;
  gap: 2px;
  border-style: dashed;
}

.widget-catalog button[data-widget-status="planned"] small {
  color: var(--ink-soft);
  font-size: .62rem;
}

/* Periods module. */
.periods-panel-professional > .workspace-widget-body {
  padding: 0;
}

.periods-panel-internal > .workspace-widget-body {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
}

.periods-panel-internal .calculation-unavailable {
  width: min(100%, 620px);
  min-height: 150px;
}

.periods-methodology-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: var(--vs-account-teal, #176f68);
  font-size: max(.8125rem, 13px);
  font-weight: 650;
  text-decoration: none;
  border: 1px solid rgba(23, 111, 104, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .54);
}

.periods-methodology-link:hover,
.periods-methodology-link:focus-visible {
  border-color: rgba(23, 111, 104, .54);
  outline: none;
}

.periods-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  font-family: Inter, system-ui, sans-serif;
}

.periods-view-header h2,
.periods-view-kicker {
  margin: 0;
}

.periods-view-header h2 {
  font-family: Inter, system-ui, sans-serif;
  font-size: .95rem;
}

.periods-view-kicker,
.periods-view-mock-note {
  color: var(--ink-soft);
  font-size: .66rem;
}

.periods-view-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(116px, 1fr)) auto auto;
  gap: 7px;
  align-items: end;
  margin: 10px 0;
  padding: 9px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--mist) 35%, transparent);
}

.periods-view-settings label,
.periods-view-settings fieldset {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink-soft);
  font-size: .64rem;
  font-weight: 700;
}

.periods-view-settings select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.periods-view-settings fieldset > div {
  display: flex;
}

.periods-view-settings button,
.ashtakavarga-view button,
.special-points-widget button,
.rectification-view button {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .68rem;
  font-weight: 750;
  cursor: pointer;
}

.periods-view-settings button[aria-checked="true"],
.ashtakavarga-view button[aria-pressed="true"],
.ashtakavarga-view button[aria-selected="true"],
.rectification-view button[aria-selected="true"],
.rectification-view button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--gold) 56%, var(--line));
  background: color-mix(in srgb, var(--gold) 12%, var(--paper));
}

.periods-view-mock-note {
  margin: 6px 0;
}

.periods-view-list {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  scrollbar-width: thin;
}

.periods-view-list.is-window-loading {
  position: relative;
}

.periods-window-loading {
  position: sticky;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 8px 12px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--account-accent, #1c7368) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--account-surface, #fff) 94%, transparent);
  box-shadow: 0 6px 18px rgb(17 45 40 / 10%);
  color: var(--account-muted, #65736f);
  font-size: 12px;
}

.periods-window-loading > span:first-child {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: periods-window-spin 0.7s linear infinite;
}

@keyframes periods-window-spin {
  to { transform: rotate(360deg); }
}

.periods-view-list-header,
.periods-view-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: .912rem;
}

.periods-view-list-header {
  position: sticky;
  top: 0;
  z-index: 3;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--mist) 42%, var(--paper));
  font-size: .816rem;
  font-weight: 750;
  text-transform: uppercase;
}

.periods-view-row:last-child {
  border-bottom: 0;
}

.periods-view-row.is-current {
  box-shadow: inset 3px 0 0 var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, var(--paper));
}

.periods-view-row.is-selected {
  outline: 2px solid color-mix(in srgb, var(--vs-account-accent) 44%, transparent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--vs-account-accent) 8%, var(--paper));
}

.periods-view-row.is-current.is-selected {
  box-shadow: inset 3px 0 0 var(--gold);
}

.periods-view-row:focus-visible {
  outline: 2px solid var(--vs-account-accent);
  outline-offset: -2px;
}

@media (pointer: coarse) {
  .periods-view-list {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

.periods-view-period {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.periods-view-path-segments,
.periods-view-dates {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

.periods-view-path-segments {
  overflow: hidden;
}

.periods-view-dates,
.periods-view-age {
  color: var(--ink-soft);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.periods-view-date-separator {
  margin-inline: 3px;
}

.period-graha {
  font-weight: 750;
}

.period-sign {
  color: var(--vs-account-teal, var(--teal));
  font-weight: 750;
}

.chara-period-explanation {
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
}

.chara-period-explanation summary {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: .62rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.chara-period-explanation summary::-webkit-details-marker {
  display: none;
}

.chara-period-explanation[open] > span {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  left: 0;
  width: min(360px, 72vw);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 10px 28px rgba(16, 32, 29, .16);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
}

.periods-view-state,
.periods-view-empty,
.periods-view-warnings {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .72rem;
  line-height: 1.45;
}

.periods-view-state.is-error {
  border-color: color-mix(in srgb, var(--copper) 46%, var(--line));
  color: var(--ink);
}

.periods-view-state [data-narayana-retry] {
  min-height: 44px;
  margin-top: 8px;
  padding-inline: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.periods-view-error-details {
  margin-top: 8px;
}

.periods-view-warnings {
  margin-bottom: 8px;
  background: color-mix(in srgb, var(--gold) 8%, var(--paper));
}

.periods-view-footer {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding-top: 18px;
}

.periods-view-footer .period-depth-navigation,
.periods-view-footer .period-depth-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.periods-view-footer .period-depth-navigation {
  flex-wrap: nowrap;
  margin-left: 0;
}

.periods-view-footer .period-depth-navigation button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink-soft);
  font: inherit;
  font-size: .7rem;
  font-weight: 750;
  cursor: pointer;
}

.periods-view-footer .period-depth-navigation button:hover,
.periods-view-footer .period-depth-navigation button:focus-visible {
  border-color: color-mix(in srgb, var(--teal) 46%, var(--line));
  color: var(--ink);
}

.periods-view-footer .period-depth-navigation button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--teal) 52%, transparent);
  outline-offset: 2px;
}

.periods-view-footer .period-depth-navigation button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--teal) 50%, var(--line));
  background: color-mix(in srgb, var(--teal) 9%, var(--paper));
  color: var(--ink);
}

.period-home-control svg {
  width: 15px;
  height: 15px;
  pointer-events: none;
}

@media (max-width: 768px) {
  .periods-view-footer .period-depth-navigation button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex-basis: 44px;
  }
}

@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  .periods-view-footer .period-depth-navigation button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex-basis: 44px;
  }
}

.narayana-current-line.periods-view-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 12px 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--mist) 24%, var(--paper));
  font-size: 16.8px;
  white-space: nowrap;
}

.narayana-current-line .periods-view-period {
  flex: 0 1 auto;
}

.narayana-current-line .periods-view-dates {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.narayana-current-line .periods-view-dates > * {
  flex: 0 0 auto;
}

.narayana-current-line.is-unresolved {
  color: var(--ink-soft);
}

.narayana-current-separator {
  flex: 0 0 auto;
  color: var(--ink-soft);
}

.narayana-current-actions,
.narayana-timeline-toolbar {
  display: flex;
  justify-content: flex-start;
  padding-top: 10px;
}

.narayana-current-actions button,
.narayana-timeline-toolbar button,
.narayana-mahadasha-row > button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.narayana-current-actions button,
.narayana-timeline-toolbar button {
  padding-inline: 13px;
}

.narayana-current-actions button:focus-visible,
.narayana-timeline-toolbar button:focus-visible,
.narayana-mahadasha-row > button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--teal) 54%, transparent);
  outline-offset: 2px;
}

.narayana-calculation-details {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 12.5px;
}

.narayana-calculation-details summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--vs-account-teal, var(--teal));
  font-weight: 650;
  cursor: pointer;
}

.narayana-calculation-details dl {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.narayana-calculation-details dl > div {
  display: grid;
  grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr);
  gap: 8px;
}

.narayana-calculation-details dt {
  font-weight: 650;
}

.narayana-calculation-details dd {
  margin: 0;
}

.narayana-timeline {
  flex: 1 1 auto;
  min-height: 180px;
  max-height: 420px;
  margin-top: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  scrollbar-width: thin;
}

.narayana-mahadasha-row {
  border-bottom: 1px solid var(--line);
}

.narayana-mahadasha-row:last-child {
  border-bottom: 0;
}

.narayana-mahadasha-row > button {
  display: grid;
  width: 100%;
  grid-template-columns: 18px minmax(40px, 1fr) max-content;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 0;
  border-radius: 0;
  text-align: left;
}

.narayana-mahadasha-row.is-current > button {
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, var(--paper));
}

.narayana-mahadasha-row.is-zero-duration > button,
.narayana-antardasha-row.is-zero-duration {
  color: var(--ink-soft);
  opacity: .68;
}

.narayana-antardasha-branch {
  display: grid;
  padding: 4px 10px 8px 36px;
  background: color-mix(in srgb, var(--mist) 20%, var(--paper));
}

.narayana-antardasha-row {
  display: grid;
  grid-template-columns: minmax(42px, 1fr) max-content;
  gap: 8px;
  align-items: center;
  min-height: 36px;
  color: var(--ink-soft);
  font-size: 12.5px;
}

.narayana-antardasha-row.is-current {
  color: var(--ink);
  font-weight: 650;
}

.narayana-unresolved-branch {
  margin: 0;
  padding: 10px 14px 12px 36px;
  color: var(--ink-soft);
  font-size: 12.5px;
}

@container periods (max-width: 620px) {
  .periods-view-list-header {
    display: none;
  }

  .periods-view-row {
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    gap: 5px;
    padding: 8px;
    font-size: .912rem;
  }

}

@container periods (max-width: 520px) {
  .periods-view-footer {
    align-items: center;
  }

  .periods-view-footer .period-depth-navigation {
    width: auto;
    margin-left: 0;
  }

  .periods-view-footer .period-depth-navigation button {
    flex: 0 0 32px;
  }

  .narayana-current-line.periods-view-row {
    gap: 5px;
    padding-inline: 8px;
    font-size: 15.6px;
  }

  .narayana-current-line .periods-view-dates {
    min-width: 0;
  }

  .narayana-calculation-details dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

}

/* Traditional Ashtakavarga, independent of ChartViewer. */
.ashtakavarga-panel-professional > .workspace-widget-body {
  padding: 0;
}

.ashtakavarga-view {
  min-width: 0;
  padding: 12px;
}

.ashtakavarga-view-header {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto auto;
  align-items: end;
  gap: 10px;
}

.ashtakavarga-view-header h2,
.ashtakavarga-view-kicker {
  margin: 0;
}

.ashtakavarga-view-header h2 {
  font-family: Inter, system-ui, sans-serif;
  font-size: .95rem;
}

.ashtakavarga-view-kicker,
.ashtakavarga-mock-note,
.ashtakavarga-future-note {
  color: var(--ink-soft);
  font-size: .65rem;
}

.ashtakavarga-mode-control,
.ashtakavarga-style-control,
.ashtakavarga-mobile-tabs {
  display: flex;
}

.ashtakavarga-map-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.ashtakavarga-mini-chart {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 7px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.ashtakavarga-mini-chart figcaption {
  color: var(--ink-soft);
  font-size: .65rem;
  font-weight: 750;
  text-align: center;
}

.ashtakavarga-mini-chart svg {
  display: block;
  width: 100%;
  aspect-ratio: 1;
}

.ashtakavarga-frame,
.ashtakavarga-grid {
  fill: none;
  stroke: var(--ink);
  stroke-width: .65;
  vector-effect: non-scaling-stroke;
}

.ashtakavarga-sign-code {
  fill: var(--ink-soft);
  font-size: 4.4px;
}

.ashtakavarga-sign-value {
  fill: var(--ink);
  font-size: 6.1px;
  font-weight: 700;
}

.ashtakavarga-center-label {
  fill: var(--ink-soft);
  font-size: 5px;
  font-weight: 700;
}

.ashtakavarga-single-map {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(240px, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.ashtakavarga-table-wrap,
.rectification-comparison-table-wrap,
.rectification-factor-table-wrap,
.rectification-factor-matrix {
  min-width: 0;
  overflow: auto;
}

.ashtakavarga-table-wrap table,
.rectification-view table,
.rectification-factor-matrix table,
.special-points-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: .7rem;
}

.ashtakavarga-table-wrap th,
.ashtakavarga-table-wrap td,
.rectification-view th,
.rectification-view td,
.rectification-factor-matrix th,
.rectification-factor-matrix td,
.special-points-table-wrap th,
.special-points-table-wrap td {
  padding: 7px;
  border: 1px solid var(--line);
  text-align: left;
}

.ashtakavarga-mobile {
  display: none;
}

.ashtakavarga-transit {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ashtakavarga-transit header h3 {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: .9rem;
}

.ashtakavarga-transit-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 9px 0;
  background: var(--line);
}

.ashtakavarga-transit-fact {
  min-width: 0;
  padding: 8px;
  background: var(--paper);
}

.ashtakavarga-transit-fact dt {
  color: var(--ink-soft);
  font-size: .6rem;
}

.ashtakavarga-transit-fact dd {
  margin: 3px 0 0;
  font-size: .7rem;
  font-weight: 700;
}

/* Special lagnas and special points. */
.special-points-widget > .workspace-widget-body {
  padding: 12px;
}

.special-points-mock-notice {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: .7rem;
}

.special-points-widget-toolbar,
.special-point-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.special-points-widget-toolbar {
  margin-bottom: 8px;
}

.special-points-table-wrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--line);
}

.special-points-table-wrap caption {
  padding: 8px;
  color: var(--ink-soft);
  font-size: .65rem;
  text-align: left;
}

.special-points-table-wrap th strong,
.special-points-table-wrap th span,
.special-points-table-wrap th small {
  display: block;
}

.special-points-table-wrap th small {
  color: var(--ink-soft);
  font-size: .58rem;
  font-weight: 500;
}

.special-points-mobile-cards {
  display: none;
}

.special-points-submenu {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: calc(100% + 5px);
  display: none;
  width: min(310px, 72vw);
  max-height: min(70svh, 560px);
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.special-points-submenu.is-open {
  display: grid;
  gap: 8px;
}

.special-points-menu-group h4 {
  margin: 0 0 4px;
  color: var(--ink-soft);
  font-size: .62rem;
  text-transform: uppercase;
}

.special-points-toggle-list,
.special-points-menu-actions {
  display: grid;
  gap: 2px;
}

.special-points-layer-toggle {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 5px;
}

.chart-special-points-submenu .special-points-layer-toggle {
  grid-template-columns: 34px minmax(0, 1fr) minmax(92px, auto);
  min-height: 42px;
  padding: 6px 8px;
  text-align: left;
}

.chart-special-points-submenu .special-points-layer-toggle[aria-checked="true"] {
  background: color-mix(in srgb, var(--copper) 10%, var(--paper));
  color: var(--ink);
}

.chart-special-points-submenu .special-points-layer-toggle small {
  max-width: 148px;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: .59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-special-points-state {
  margin: 0;
  padding: 7px 8px;
  color: var(--ink-soft);
  font-size: .64rem;
}

.chart-special-points-state.is-error {
  color: var(--danger, #9b3f32);
}

.special-point-toggle-code {
  color: var(--copper);
  font-weight: 800;
}

.special-point-toggle-state,
.special-points-layer-toggle small {
  color: var(--ink-soft);
  font-size: .56rem;
}

.chart-special-point {
  z-index: 6;
  display: inline-grid;
  justify-items: center;
  color: color-mix(in srgb, var(--copper) 72%, var(--ink));
  font-family: Inter, system-ui, sans-serif;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
}

.chart-special-point span {
  font-size: clamp(8px, 1.55cqw, 11px);
}

.chart-special-point small {
  font-size: clamp(6px, 1.1cqw, 8px);
  font-weight: 450;
}

.chart-special-point--south {
  position: absolute;
  left: 7px;
  bottom: 6px;
}

.chart-special-point--south + .chart-special-point--south {
  left: 34px;
}

.chart-special-point--north {
  position: absolute;
  transform: translate(-50%, 14px);
}

.north-special-points {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.chart-special-point-row {
  z-index: 8;
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, .55cqw, 5px);
  color: color-mix(in srgb, var(--copper) 82%, var(--ink));
  font-family: Inter, system-ui, sans-serif;
  line-height: 1;
  pointer-events: none;
}

.chart-special-point-row-south {
  position: absolute;
  left: clamp(5px, .9cqw, 8px);
  bottom: clamp(5px, .9cqw, 8px);
  max-width: calc(100% - 12px);
}

.chart-special-point-row-north {
  position: absolute;
  width: max-content;
  max-width: min(28%, 18cqw);
  transform: translate(-50%, -50%);
}

.chart-special-point {
  display: inline-grid;
  justify-items: center;
  gap: 1px;
  min-width: 0;
}

.chart-special-point strong {
  font-size: clamp(9px, 1.7cqw, 12px);
  font-weight: 800;
}

.chart-special-point small {
  color: color-mix(in srgb, currentColor 82%, transparent);
  font-size: clamp(6px, 1.05cqw, 8px);
  font-weight: 600;
}

/* Transparent rectification scenario. */
.rectification-widget > .workspace-widget-body,
.rectification-factor-widget > .workspace-widget-body {
  padding: 12px;
}

.rectification-widget-mobile {
  display: none;
}

.rectification-view {
  min-width: 0;
  font-family: Inter, system-ui, sans-serif;
}

.rectification-view-header > span,
.rectification-mock-label {
  color: var(--teal);
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.rectification-view-header h2 {
  margin: 2px 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
}

.rectification-view-header p,
.rectification-range > p,
.rectification-transparency-note,
.rectification-factor-matrix > p {
  margin: 4px 0;
  color: var(--ink-soft);
  font-size: .7rem;
}

.rectification-range {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--line);
}

.rectification-range legend {
  padding: 0 4px;
  font-size: .7rem;
  font-weight: 800;
}

.rectification-range-fields,
.rectification-event-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.rectification-view label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--ink-soft);
  font-size: .62rem;
  font-weight: 700;
}

.rectification-view input,
.rectification-view select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.rectification-desktop-layout {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(520px, 1.5fr);
  gap: 12px;
  align-items: start;
}

.rectification-events,
.rectification-results,
.rectification-comparison,
.rectification-hypothesis,
.rectification-factor-group,
.rectification-changes,
.rectification-why,
.rectification-period-rationale {
  min-width: 0;
  border: 1px solid var(--line);
  padding: 9px;
}

.rectification-events h3,
.rectification-comparison h3,
.rectification-hypothesis h3,
.rectification-factor-group h4,
.rectification-changes h4,
.rectification-why h4,
.rectification-period-rationale h4 {
  margin: 0 0 6px;
  font-family: Inter, system-ui, sans-serif;
  font-size: .78rem;
}

.rectification-event-list,
.rectification-factor-group ol,
.rectification-why ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rectification-event {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--mist) 24%, var(--paper));
}

.rectification-event-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rectification-candidate-selector {
  margin-bottom: 8px;
}

.rectification-evidence-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.rectification-factor-group li,
.rectification-why li {
  padding: 7px;
  border-left: 2px solid var(--line);
  background: color-mix(in srgb, var(--mist) 24%, transparent);
  font-size: .68rem;
}

.rectification-factor-group--confirmations li {
  border-left-color: var(--sage);
}

.rectification-factor-group--contradictions li {
  border-left-color: var(--copper);
}

.rectification-transparent-factors summary {
  margin: 8px 0;
  color: var(--teal);
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}

.rectification-factor-matrix strong {
  color: color-mix(in srgb, var(--gold) 76%, var(--ink));
}

@media (max-width: 1180px) {
  .today-panchanga-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .periods-view-settings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ashtakavarga-transit-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rectification-desktop-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .account-app,
  .account-main,
  .account-view,
  .workspace-page,
  .workspace-canvas,
  .workspace-rows,
  .workspace-row-shell,
  .workspace-row,
  .workspace-widget {
    max-width: 100%;
  }

  .today-section-heading,
  .today-period-notice,
  .today-personal-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .today-source-select {
    width: 100%;
    min-width: 0;
  }

  .today-panchanga-grid,
  .today-lord-grid,
  .today-personal-summary,
  .today-rule-chain ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-personal-summary article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .today-personal-summary article:last-child {
    border-bottom: 0;
  }

  .today-period-notice button {
    width: 100%;
  }

  .workspace-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .workspace-row > .workspace-widget {
    grid-column: 1;
  }

  .workspace-widget-header {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 5px;
  }

  .workspace-widget-header .method-and-source {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    padding-bottom: 5px;
  }

  .workspace-widget-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .workspace-widget-inserter {
    top: auto;
    right: 10px;
    bottom: -10px;
    opacity: .82;
    transform: none;
  }

  .workspace-widget:hover > .workspace-widget-inserter,
  .workspace-widget:focus-within > .workspace-widget-inserter,
  .workspace-widget-inserter:focus-visible {
    transform: scale(1.04);
  }

  .periods-view-settings,
  .ashtakavarga-view-header,
  .ashtakavarga-single-map,
  .rectification-range-fields,
  .rectification-evidence-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .periods-view-list-header {
    display: none;
  }

  .periods-view-footer {
    position: sticky;
    z-index: 12;
    bottom: 0;
    display: flex;
    margin-inline: -8px;
    padding: 16px 8px max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(12px);
  }

  .periods-view-footer .period-depth-navigation button {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .periods-view-row {
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    gap: 4px;
    padding: 7px;
    font-size: .816rem;
  }

  .ashtakavarga-desktop {
    display: none;
  }

  .ashtakavarga-mobile {
    display: grid;
    gap: 9px;
    margin-top: 9px;
  }

  .ashtakavarga-mobile-selector {
    display: grid;
    gap: 4px;
    color: var(--ink-soft);
    font-size: .68rem;
    font-weight: 700;
  }

  .ashtakavarga-mobile-selector select {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
  }

  .ashtakavarga-mini-chart {
    width: min(100%, 360px);
    margin-inline: auto;
  }

  .ashtakavarga-transit-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .special-points-table-wrap {
    display: none;
  }

  .special-points-mobile-cards {
    display: grid;
    gap: 9px;
  }

  .special-point-card {
    display: grid;
    gap: 8px;
    padding: 11px;
    border: 1px solid var(--line);
    background: var(--paper);
  }

  .special-point-card header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
  }

  .special-point-card header h3,
  .special-point-card header strong {
    display: inline;
    margin: 0 5px 0 0;
    font-family: Inter, system-ui, sans-serif;
    font-size: .82rem;
  }

  .special-point-card header > span,
  .special-point-methodology-note {
    color: var(--ink-soft);
    font-size: .62rem;
  }

  .special-point-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--line);
  }

  .special-point-card dl > div {
    padding: 7px;
    background: var(--paper);
  }

  .special-point-card dt {
    color: var(--ink-soft);
    font-size: .58rem;
  }

  .special-point-card dd {
    margin: 2px 0 0;
    font-size: .7rem;
    font-weight: 700;
  }

  .house-menu.is-touch-sheet {
    position: fixed;
    z-index: 105;
    right: 8px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    left: 8px !important;
    top: auto !important;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: min(72svh, 620px);
    padding: 10px;
    overflow: auto;
    border-radius: 18px;
    box-shadow: var(--shadow);
  }

  .house-menu.is-touch-sheet .special-points-submenu {
    position: static;
    width: 100%;
    max-height: none;
    box-shadow: none;
  }

  .house-menu.is-touch-sheet button {
    min-height: 42px;
    font-size: .75rem;
  }

  .rectification-widget-desktop {
    display: none;
  }

  .rectification-widget-mobile {
    display: block;
  }

  .rectification-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 8px 0;
  }

  .rectification-event-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .rectification-view table,
  .rectification-factor-matrix table {
    min-width: 680px;
  }
}

@media (max-width: 390px) {
  .account-main {
    width: 100%;
    padding-inline: 8px;
    overflow-x: clip;
  }

  .today-section {
    padding: 13px;
  }

  .ashtakavarga-transit-facts,
  .special-point-card dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .method-and-source {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Jaimini calculation profile and chara-karaka views --------------------- */

.planet-table-jaimini-head,
.planet-table-jaimini-cell {
  position: relative;
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--vs-account-line) 82%, transparent);
}

.planet-table-jaimini-head-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.jaimini-scheme-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 30px;
  min-height: 22px;
  padding: 1px 6px;
  border: 1px solid var(--vs-account-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mist) 70%, var(--paper));
  color: var(--vs-account-muted);
  font: 800 .64rem/1 Inter, system-ui, sans-serif;
  letter-spacing: .02em;
}

.jaimini-karaka-token {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 28px;
  padding: 2px 6px;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--mist) 58%, var(--paper));
  color: var(--vs-account-ink);
  font-weight: 820;
  cursor: help;
}

.jaimini-karaka-token::after {
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  z-index: 20;
  width: max-content;
  max-width: min(240px, 72vw);
  padding: 7px 9px;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  background: var(--vs-account-ink);
  box-shadow: 0 8px 24px rgba(16, 24, 25, .18);
  color: var(--paper);
  content: attr(data-tooltip);
  font: 650 .7rem/1.35 Inter, system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity .14s ease, transform .14s ease;
  visibility: hidden;
}

.jaimini-karaka-token:hover::after,
.jaimini-karaka-token:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.jaimini-karaka-token:focus-visible {
  outline: 2px solid var(--vs-account-accent);
  outline-offset: 2px;
}

.planet-position-cards {
  display: none;
  gap: 8px;
  margin: 0;
  padding: 10px;
  list-style: none;
}

.planet-position-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 11px 12px;
  border: 1px solid var(--vs-account-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
}

.planet-position-card h3,
.planet-position-card p {
  margin: 0;
}

.planet-position-card h3 {
  color: var(--graha-color, var(--vs-account-ink));
  font-family: Inter, system-ui, sans-serif;
  font-size: .84rem;
}

.planet-position-card-code {
  color: var(--vs-account-muted);
  font-size: .68rem;
  font-weight: 800;
}

.planet-position-card p {
  grid-column: 1 / -1;
  color: var(--vs-account-muted);
  font-size: .72rem;
  line-height: 1.35;
}

.planet-position-card .planet-position-card-degree {
  color: var(--vs-account-ink);
  font-weight: 760;
}

.planet-position-card-jaimini {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--vs-account-line) 72%, transparent);
}

.jaimini-calculation-warning {
  margin: 8px 10px 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--vs-account-line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--gold) 12%, var(--paper));
  color: color-mix(in srgb, var(--ink) 72%, var(--gold));
  font-size: .7rem;
  line-height: 1.4;
}

.karakas-widget {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: visible;
}

.karakas-widget-header {
  grid-template-columns: 40px minmax(0, 1fr) auto 40px;
}

.karakas-widget-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.karakas-widget-header .karakas-widget-heading {
  grid-column: 2;
  grid-row: 1;
}

.karakas-widget-header .workspace-widget-source {
  grid-column: 3;
  grid-row: 1;
}

.karakas-widget-header .workspace-widget-actions {
  grid-column: 4;
  grid-row: 1;
}

.karakas-widget-heading .workspace-widget-title {
  flex: 1 1 auto;
}

.karakas-widget-controls {
  display: flex;
  align-items: center;
  grid-column: 2 / -1;
  grid-row: 2;
  min-width: 0;
  padding: 0 0 5px;
}

.karakas-scheme-control {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(70px, 1fr));
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--vs-account-line);
  border-radius: 8px;
  background: rgba(20, 32, 30, .035);
}

.karakas-scheme-control [role="radio"] {
  min-height: 34px;
  padding: 0 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--vs-account-muted);
  font: 780 .68rem/1 Inter, system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.karakas-scheme-control [role="radio"]:hover {
  color: var(--vs-account-ink);
}

.karakas-scheme-control [role="radio"][aria-checked="true"] {
  background: var(--paper);
  color: var(--vs-account-ink);
  box-shadow: inset 0 -2px 0 var(--vs-account-accent);
}

.karakas-scheme-control [role="radio"]:focus-visible {
  outline: 2px solid var(--vs-account-accent);
  outline-offset: 2px;
}

.karakas-widget > .workspace-widget-body {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 10px;
}

.karakas-widget-list {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.karakas-widget-row {
  display: grid;
  grid-template-columns: minmax(44px, auto) minmax(40px, .7fr) minmax(82px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 4px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--vs-account-line) 70%, transparent);
}

.karakas-widget-graha {
  color: var(--vs-account-ink);
  font-weight: 800;
}

.karakas-widget-degree {
  justify-self: end;
  color: var(--vs-account-muted);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

.karakas-methodology {
  justify-self: start;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--vs-account-muted);
  font: 750 .7rem/1.3 Inter, system-ui, sans-serif;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.karakas-methodology:hover,
.karakas-methodology:focus-visible {
  color: var(--vs-account-ink);
}

@media (max-width: 760px) {
  .planet-table-panel > .workspace-widget-body {
    overflow: visible;
  }

  .karakas-widget-header {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  .karakas-widget-header .karakas-widget-heading {
    grid-column: 2;
    grid-row: 1;
  }

  .karakas-widget-header .workspace-widget-actions {
    grid-column: 3;
    grid-row: 1;
  }

  .karakas-widget-header .workspace-widget-source {
    display: none;
  }

  .karakas-widget-controls {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .karakas-scheme-control {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .karakas-scheme-control [role="radio"] {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jaimini-karaka-token::after {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-row-inserter {
    transition: none;
  }
}

/* Workspace v4: persistent worksheets and preset-aware tools ------------- */

.account-app {
  --workspace-tool-dock-height: 49px;
}

.workspace-sheet-switcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
  padding: 2px 0 0;
  border-bottom: 1px solid var(--vs-account-line);
}

.workspace-sheet-tabs {
  display: flex;
  align-items: end;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.workspace-sheet-tabs::-webkit-scrollbar {
  display: none;
}

.workspace-sheet-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  min-width: 92px;
  max-width: 210px;
  min-height: 40px;
  padding: 0 7px 0 0;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: transparent;
  color: var(--vs-account-muted);
  font: inherit;
  font-size: .73rem;
  font-weight: 750;
  line-height: 1.15;
  cursor: pointer;
}

.workspace-sheet-tabs [role="tab"] {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  padding: 0 4px 0 11px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.workspace-sheet-tab::after {
  position: absolute;
  right: 7px;
  bottom: 0;
  left: 7px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  content: "";
}

.workspace-sheet-tab:hover {
  background: rgba(197, 148, 79, .07);
  color: var(--vs-account-ink);
}

.workspace-sheet-tab.is-active,
.workspace-sheet-tab.active,
.workspace-sheet-tab[aria-selected="true"],
.workspace-sheet-tab:has(> [role="tab"].is-active),
.workspace-sheet-tab:has(> [role="tab"].active),
.workspace-sheet-tab:has(> [role="tab"][aria-selected="true"]) {
  border-color: var(--vs-account-line);
  background: color-mix(in srgb, var(--paper) 88%, var(--gold));
  color: var(--vs-account-ink);
}

.workspace-sheet-tab.is-active::after,
.workspace-sheet-tab.active::after,
.workspace-sheet-tab[aria-selected="true"]::after,
.workspace-sheet-tab:has(> [role="tab"].is-active)::after,
.workspace-sheet-tab:has(> [role="tab"].active)::after,
.workspace-sheet-tab:has(> [role="tab"][aria-selected="true"])::after {
  background: var(--vs-account-accent);
}

.workspace-sheet-tab-label,
.workspace-sheet-tab-title,
.workspace-sheet-tabs [role="tab"] > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-sheet-tab-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-right: -3px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--vs-account-muted);
  font: inherit;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}

.workspace-sheet-tab-close:hover {
  background: rgba(20, 32, 30, .07);
  color: var(--vs-account-ink);
}

.workspace-sheet-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 40px;
  height: 40px;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  background: rgba(255, 252, 245, .66);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.workspace-sheet-add > span[aria-hidden="true"] {
  font-size: 1.05rem;
  line-height: 1;
}

.workspace-sheet-add-label {
  font-size: .7rem;
  white-space: nowrap;
}

.workspace-sheet-add:hover,
.workspace-sheet-add[aria-expanded="true"] {
  border-color: rgba(197, 148, 79, .46);
  background: rgba(197, 148, 79, .1);
}

.workspace-sheet-mobile {
  display: none;
  gap: 3px;
  min-width: 0;
  color: var(--vs-account-muted);
  font-size: .65rem;
  font-weight: 750;
}

.workspace-sheet-mobile select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  outline: none;
  background: var(--paper);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .74rem;
  font-weight: 750;
}

/* The v4 toolbar owns the sticky layer while retaining the v3 dock hooks. */
.workspace-sheet-toolbar {
  position: sticky;
  top: var(--account-topbar-height);
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 49px;
  padding: 4px 0;
  border-bottom: 1px solid var(--vs-account-line);
  background: var(--paper);
  box-shadow: none;
}

.workspace-sheet-toolbar.is-stuck {
  box-shadow: 0 5px 14px rgba(20, 32, 30, .06);
}

.workspace-quick-tools {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.workspace-quick-tools::-webkit-scrollbar {
  display: none;
}

.workspace-quick-tool,
.workspace-quick-tools > button,
.workspace-quick-tools > [data-quick-tool] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 5px;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  background: rgba(255, 252, 245, .66);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .71rem;
  font-weight: 750;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
}

.workspace-quick-tool:hover,
.workspace-quick-tools > button:hover,
.workspace-quick-tools > [data-quick-tool]:hover,
.workspace-quick-tool.is-active,
.workspace-quick-tool[aria-pressed="true"],
.workspace-quick-tools > button[aria-pressed="true"],
.workspace-quick-tools > [data-quick-tool][aria-pressed="true"] {
  border-color: rgba(197, 148, 79, .44);
  background: rgba(197, 148, 79, .1);
}

.workspace-persistent-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}

.workspace-persistent-actions > button,
.workspace-add-widget,
.workspace-sheet-settings-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  background: rgba(255, 252, 245, .66);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .7rem;
  font-weight: 780;
  white-space: nowrap;
  cursor: pointer;
}

.workspace-add-widget {
  border-color: rgba(197, 148, 79, .4);
  background: rgba(197, 148, 79, .1);
}

.workspace-persistent-actions > button:hover,
.workspace-add-widget:hover,
.workspace-sheet-settings-trigger:hover,
.workspace-sheet-settings-trigger[aria-expanded="true"] {
  border-color: rgba(197, 148, 79, .5);
  background: rgba(197, 148, 79, .14);
}

.workspace-sheet-switcher :is(button, select):focus-visible,
.workspace-sheet-toolbar :is(button, input):focus-visible,
.workspace-sheet-picker :is(button, input, select):focus-visible,
.workspace-sheet-settings-dialog :is(button, input, select):focus-visible {
  outline: 2px solid var(--vs-account-accent);
  outline-offset: 2px;
}

/* Search expands without allowing the toolbar to widen the document. */
.workspace-tool-search {
  position: relative;
  display: block;
  flex: 0 1 230px;
  width: clamp(178px, 17vw, 230px);
  min-width: 158px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.workspace-tool-search > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.workspace-tool-search-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.workspace-tool-search-popover,
.workspace-tool-search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 4;
  display: grid;
  align-content: start;
  gap: 6px;
  width: min(360px, calc(100vw - 24px));
  max-height: min(62svh, 480px);
  padding: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(197, 148, 79, .3);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 16px 38px rgba(20, 32, 30, .14);
}

.workspace-tool-search input,
[data-tool-search-input] {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px 0 0 7px;
  outline: none;
  background: rgba(255, 252, 245, .76);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .74rem;
}

.workspace-tool-search-control > button,
.workspace-tool-search [data-tool-search-submit] {
  position: relative;
  min-width: 58px;
  width: 58px;
  min-height: 40px;
  padding: 0 9px;
  overflow: hidden;
  border: 1px solid var(--vs-account-line);
  border-left: 0;
  border-radius: 0 7px 7px 0;
  background: rgba(255, 252, 245, .7);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: 0;
  font-weight: 780;
  cursor: pointer;
}

.workspace-tool-search-control > button::after,
.workspace-tool-search [data-tool-search-submit]::after {
  content: "Найти";
  font-size: .66rem;
}

.workspace-tool-search-control > button:hover,
.workspace-tool-search [data-tool-search-submit]:hover {
  background: rgba(197, 148, 79, .11);
}

.workspace-tool-search-results button,
.workspace-tool-search-result {
  width: 100%;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 720;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.workspace-tool-search-results button:hover,
.workspace-tool-search-result:hover,
.workspace-tool-search-results button[aria-selected="true"] {
  border-color: rgba(197, 148, 79, .34);
  background: rgba(197, 148, 79, .09);
}

.workspace-tool-search-empty {
  margin: 0;
  padding: 12px 8px;
  color: var(--vs-account-muted);
  font-size: .73rem;
  text-align: center;
}

.workspace-empty-sheet {
  display: grid;
  grid-column: 1 / -1;
  align-content: center;
  justify-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: clamp(300px, 42svh, 420px);
  padding: 40px 20px;
  color: var(--vs-account-ink);
  background: transparent;
  text-align: center;
}

.workspace-empty-sheet > span {
  color: var(--teal);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.workspace-empty-sheet h2 {
  margin: 0;
  font-family: Literata, Georgia, serif;
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  font-weight: 600;
  line-height: 1.25;
}

.workspace-empty-sheet p {
  max-width: 480px;
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .78rem;
}

.workspace-empty-sheet button {
  min-height: 40px;
  margin-top: 7px;
  padding: 0 13px;
  border: 1px solid rgba(197, 148, 79, .46);
  border-radius: 7px;
  background: rgba(197, 148, 79, .1);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 780;
  cursor: pointer;
}

.workspace-empty-sheet button:hover {
  border-color: rgba(197, 148, 79, .62);
  background: rgba(197, 148, 79, .15);
}

.workspace-empty-sheet button:focus-visible {
  outline: 2px solid var(--vs-account-accent);
  outline-offset: 2px;
}

/* Preset picker and sheet settings share one quiet overlay language. */
.workspace-sheet-picker,
.workspace-sheet-settings-dialog {
  position: fixed;
  inset: 0;
  z-index: 104;
  display: grid;
}

.workspace-sheet-picker > .workspace-overlay,
.workspace-sheet-settings-dialog > .workspace-overlay,
.workspace-sheet-picker-backdrop,
.workspace-sheet-settings-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(16, 24, 25, .46);
  cursor: default;
}

.workspace-sheet-picker-panel,
.workspace-sheet-settings-panel,
.workspace-sheet-settings-dialog-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-self: stretch;
  justify-self: end;
  gap: 13px;
  width: min(500px, calc(100vw - 24px));
  height: 100%;
  padding: 18px;
  overflow: hidden;
  border-left: 1px solid var(--vs-account-line);
  outline: none;
  background: var(--paper);
  box-shadow: -24px 0 68px rgba(16, 24, 25, .2);
}

.workspace-sheet-picker-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.workspace-sheet-settings-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.workspace-sheet-picker-header,
.workspace-sheet-settings-header,
.workspace-sheet-picker-panel > header,
.workspace-sheet-settings-panel > header,
.workspace-sheet-settings-dialog-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workspace-sheet-picker-header > div,
.workspace-sheet-settings-header > div,
.workspace-sheet-picker-panel > header > div,
.workspace-sheet-settings-panel > header > div,
.workspace-sheet-settings-dialog-panel > header > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.workspace-sheet-picker-header span,
.workspace-sheet-settings-header span,
.workspace-sheet-picker-panel > header span,
.workspace-sheet-settings-panel > header span,
.workspace-sheet-settings-dialog-panel > header span {
  color: var(--vs-account-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.workspace-sheet-picker-header h2,
.workspace-sheet-settings-header h2,
.workspace-sheet-picker-panel > header h2,
.workspace-sheet-settings-panel > header h2,
.workspace-sheet-settings-dialog-panel > header h2 {
  margin: 0;
  color: var(--vs-account-ink);
  font-family: Literata, Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}

.workspace-sheet-picker-header > button,
.workspace-sheet-settings-header > button,
.workspace-sheet-picker-panel > header > button,
.workspace-sheet-settings-panel > header > button,
.workspace-sheet-settings-dialog-panel > header > button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--vs-account-line);
  border-radius: 50%;
  background: rgba(255, 252, 245, .72);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.workspace-sheet-picker-body,
.workspace-sheet-settings-body {
  display: grid;
  align-content: start;
  gap: 15px;
  min-width: 0;
  padding: 1px 4px 8px 1px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.workspace-sheet-picker-panel > p {
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .76rem;
}

.workspace-preset-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--vs-account-line);
  border-radius: 9px;
  background: rgba(255, 252, 245, .66);
  list-style: none;
}

.workspace-preset-grid > li {
  display: grid;
  min-width: 0;
}

.workspace-preset-grid > li + li {
  border-top: 1px solid var(--vs-account-line);
}

.workspace-preset-option,
.workspace-custom-template-option {
  display: grid;
  grid-template-columns: minmax(145px, .8fr) minmax(0, 1.2fr) 12px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 7px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.workspace-preset-grid > li > .workspace-preset-option,
.workspace-preset-grid > li > .workspace-custom-template-option {
  width: 100%;
  height: auto;
}

.workspace-preset-option strong,
.workspace-custom-template-option strong {
  min-width: 0;
  font-size: .78rem;
}

.workspace-preset-option span,
.workspace-preset-option small,
.workspace-custom-template-option span,
.workspace-custom-template-option small {
  min-width: 0;
  color: var(--vs-account-muted);
  font-size: .69rem;
}

.workspace-preset-option::after,
.workspace-custom-template-option::after {
  content: "";
  justify-self: end;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  color: var(--vs-account-muted);
  transform: rotate(45deg);
}

.workspace-preset-option:hover,
.workspace-preset-option.is-selected,
.workspace-preset-option[aria-pressed="true"],
.workspace-preset-option[aria-selected="true"],
.workspace-custom-template-option:hover,
.workspace-custom-template-option.is-selected,
.workspace-custom-template-option[aria-pressed="true"],
.workspace-custom-template-option[aria-selected="true"] {
  background: rgba(197, 148, 79, .1);
}

.workspace-preset-option:focus-visible,
.workspace-custom-template-option:focus-visible {
  outline: 2px solid rgba(197, 148, 79, .68);
  outline-offset: -2px;
}

.workspace-sheet-settings-section,
.workspace-calculation-settings,
.settings-jaimini-karakas {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.workspace-sheet-settings-section + .workspace-sheet-settings-section,
.workspace-calculation-settings,
.settings-jaimini-karakas {
  padding-top: 12px;
  border-top: 1px solid var(--vs-account-line);
}

.workspace-sheet-settings-section h3,
.workspace-calculation-settings h3,
.settings-jaimini-karakas legend {
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.workspace-sheet-settings-fields,
.workspace-calculation-settings-fields,
.settings-calculations-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}

.workspace-sheet-settings-fields label,
.workspace-calculation-settings-fields label,
.settings-calculations-fields label,
.workspace-sheet-settings-body > label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--vs-account-muted);
  font-size: .69rem;
  font-weight: 750;
}

.settings-calculations {
  min-width: 0;
}

.settings-calculations > .settings-jaimini-karakas {
  margin-top: 2px;
}

.workspace-sheet-settings-dialog input,
.workspace-sheet-settings-dialog select,
[data-sheet-name-input] {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  outline: none;
  background: rgba(255, 252, 245, .76);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .74rem;
}

.settings-jaimini-karakas {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.settings-jaimini-karakas legend {
  float: none;
  grid-column: 1 / -1;
}

.settings-jaimini-label {
  grid-column: 1;
  color: var(--vs-account-ink);
  font-size: .74rem;
  font-weight: 780;
}

.settings-jaimini-description {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .69rem;
  line-height: 1.45;
}

.settings-arudha-section {
  display: grid;
  grid-column: 1 / -1;
  min-width: 0;
}

.settings-arudha-section h3 {
  margin: 10px 0 0;
  color: var(--vs-account-ink);
  font-size: .76rem;
  line-height: 1.3;
}

.settings-arudha-toggle {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--vs-account-line);
  cursor: pointer;
}

.settings-arudha-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-arudha-copy strong {
  color: var(--vs-account-ink);
  font-size: .74rem;
  line-height: 1.3;
}

.settings-arudha-copy small {
  color: var(--vs-account-muted);
  font-size: .68rem;
}

.settings-arudha-switch {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 24px;
}

.settings-arudha-switch input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.settings-arudha-switch > span {
  position: absolute;
  inset: 0;
  border: 1px solid var(--vs-account-line-strong, var(--vs-account-line));
  border-radius: 999px;
  background: rgba(20, 32, 30, .08);
  transition: background .18s ease, border-color .18s ease;
}

.settings-arudha-switch > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--vs-account-surface, #fffdfa);
  box-shadow: 0 1px 4px rgba(25, 30, 28, .2);
  transition: transform .18s ease;
}

.settings-arudha-switch input:checked + span {
  border-color: var(--vs-account-teal, #196960);
  background: var(--vs-account-teal, #196960);
}

.settings-arudha-switch input:checked + span::after {
  transform: translateX(20px);
}

.settings-arudha-switch input:focus-visible + span {
  outline: 2px solid var(--vs-account-accent);
  outline-offset: 2px;
}

.settings-jaimini-options {
  display: inline-grid;
  grid-column: 1;
  grid-row: auto;
  grid-template-columns: repeat(2, minmax(88px, 1fr));
  gap: 4px;
  width: 100%;
  padding: 3px;
  border: 1px solid var(--vs-account-line);
  border-radius: 9px;
  background: rgba(20, 32, 30, .035);
}

.settings-jaimini-options [role="radio"] {
  display: grid;
  place-items: center;
  min-width: 88px;
  min-height: 42px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--vs-account-muted);
  font: inherit;
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
}

.settings-jaimini-options [role="radio"]:hover {
  color: var(--vs-account-ink);
}

.settings-jaimini-options [role="radio"][aria-checked="true"] {
  background: var(--paper);
  color: var(--vs-account-ink);
  box-shadow: inset 0 -2px 0 var(--vs-account-accent);
}

.settings-jaimini-options [role="radio"]:focus-visible {
  outline: 2px solid var(--vs-account-accent);
  outline-offset: 2px;
}

.workspace-sheet-settings-actions,
.workspace-sheet-picker-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 11px;
  border-top: 1px solid var(--vs-account-line);
}

.workspace-sheet-rename {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.workspace-sheet-rename > label {
  color: var(--vs-account-muted);
  font-size: .69rem;
  font-weight: 750;
}

.workspace-sheet-rename > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.workspace-sheet-rename > div > input {
  border-radius: 7px 0 0 7px;
}

.workspace-sheet-rename > div > button {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--vs-account-line);
  border-left: 0;
  border-radius: 0 7px 7px 0;
  background: rgba(197, 148, 79, .1);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .7rem;
  font-weight: 780;
  cursor: pointer;
}

.workspace-sheet-settings-body > .workspace-sheet-settings-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-content: stretch;
}

.workspace-sheet-settings-body > .workspace-sheet-settings-actions > button {
  display: grid;
  justify-items: start;
  gap: 2px;
  width: 100%;
  min-height: 58px;
  padding: 8px 10px;
  text-align: left;
}

.workspace-sheet-settings-actions button strong {
  font-size: .75rem;
}

.workspace-sheet-settings-actions button span {
  color: var(--vs-account-muted);
  font-size: .67rem;
  font-weight: 650;
}

.workspace-sheet-settings-actions button,
.workspace-sheet-picker-actions button,
.workspace-sheet-settings-dialog [data-sheet-action] {
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  background: rgba(255, 252, 245, .7);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .71rem;
  font-weight: 780;
  cursor: pointer;
}

.workspace-sheet-settings-dialog [data-sheet-action="save"],
.workspace-sheet-settings-dialog [data-sheet-action="save-template"] {
  border-color: rgba(197, 148, 79, .5);
  background: rgba(197, 148, 79, .14);
}

.workspace-sheet-settings-dialog [data-sheet-action="delete"] {
  color: color-mix(in srgb, var(--ink) 76%, var(--gold));
}

.workspace-sheet-settings-dialog [data-sheet-action="delete"].is-danger {
  border-color: rgba(139, 69, 53, .25);
  color: #7d4337;
}

.workspace-sheet-settings-actions button:hover,
.workspace-sheet-picker-actions button:hover,
.workspace-sheet-settings-dialog [data-sheet-action]:hover {
  border-color: rgba(197, 148, 79, .5);
  background: rgba(197, 148, 79, .12);
}

@media (max-width: 1440px) {
  .workspace-sheet-tab {
    min-width: 82px;
    max-width: 172px;
  }

  .workspace-quick-tool,
  .workspace-quick-tools > button,
  .workspace-quick-tools > [data-quick-tool],
  .workspace-persistent-actions > button,
  .workspace-add-widget,
  .workspace-sheet-settings-trigger {
    padding-inline: 9px;
  }
}

@media (max-width: 1180px) {
  .account-app {
    --workspace-tool-dock-height: 88px;
  }

  .workspace-sheet-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .workspace-persistent-actions {
    justify-content: flex-start;
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .workspace-sheet-switcher {
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    gap: 6px;
    padding: 2px 0 5px;
  }

  .workspace-sheet-tabs {
    display: none;
  }

  .workspace-sheet-mobile {
    display: grid;
  }

  .workspace-sheet-mobile > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .workspace-sheet-mobile select,
  .workspace-sheet-add {
    min-height: 40px;
    height: 40px;
  }

  .workspace-sheet-add {
    width: 40px;
    padding: 0;
  }

  .workspace-sheet-add-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .workspace-sheet-toolbar {
    top: var(--account-topbar-height);
    gap: 4px;
    min-height: 88px;
    margin-inline: 0;
    padding: 3px 0 5px;
  }

  .workspace-quick-tools,
  .workspace-persistent-actions {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding: 1px 2px 3px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .workspace-quick-tools::-webkit-scrollbar,
  .workspace-persistent-actions::-webkit-scrollbar {
    display: none;
  }

  .workspace-quick-tool,
  .workspace-quick-tools > button,
  .workspace-quick-tools > [data-quick-tool],
  .workspace-persistent-actions > button,
  .workspace-add-widget,
  .workspace-sheet-settings-trigger {
    min-height: 40px;
    padding-inline: 11px;
  }

  .workspace-tool-search {
    flex: 0 0 224px;
    width: 224px;
    min-width: 224px;
  }

  .workspace-tool-search-popover,
  .workspace-tool-search-results {
    position: fixed;
    right: 8px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    left: 8px;
    top: auto;
    width: auto;
    max-height: min(calc(100svh - 116px - env(safe-area-inset-bottom)), 520px);
    border-radius: 16px;
    box-shadow: 0 -18px 52px rgba(16, 24, 25, .2);
  }

  .workspace-sheet-picker,
  .workspace-sheet-settings-dialog {
    align-items: end;
    padding: 8px 8px calc(76px + env(safe-area-inset-bottom));
  }

  .workspace-sheet-picker-panel,
  .workspace-sheet-settings-panel,
  .workspace-sheet-settings-dialog-panel {
    align-self: end;
    justify-self: stretch;
    width: 100%;
    height: auto;
    max-height: min(calc(100svh - 92px - env(safe-area-inset-bottom)), 760px);
    padding: 14px;
    border: 1px solid var(--vs-account-line);
    border-radius: 18px;
    box-shadow: 0 -18px 52px rgba(16, 24, 25, .22);
  }

  .workspace-preset-option,
  .workspace-custom-template-option {
    grid-template-columns: minmax(0, 1fr) 12px;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    min-height: 56px;
    padding: 8px 10px;
  }

  .workspace-preset-option strong,
  .workspace-custom-template-option strong {
    grid-column: 1;
    grid-row: 1;
  }

  .workspace-preset-option span,
  .workspace-preset-option small,
  .workspace-custom-template-option span,
  .workspace-custom-template-option small {
    grid-column: 1;
    grid-row: 2;
  }

  .workspace-preset-option::after,
  .workspace-custom-template-option::after {
    grid-column: 2;
    grid-row: 1 / -1;
  }

  .workspace-empty-sheet {
    min-height: 260px;
    padding: 28px 14px;
  }

  .workspace-empty-sheet button {
    width: min(100%, 280px);
    min-height: 44px;
  }

  .workspace-sheet-settings-fields,
  .workspace-calculation-settings-fields,
  .settings-calculations-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-sheet-settings-actions,
  .workspace-sheet-picker-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-sheet-settings-actions button,
  .workspace-sheet-picker-actions button,
  .workspace-sheet-settings-dialog [data-sheet-action] {
    min-height: 44px;
  }
}

@media (max-width: 390px) {
  .workspace-sheet-switcher {
    gap: 5px;
  }

  .workspace-sheet-mobile select {
    padding-left: 8px;
    font-size: .7rem;
  }

  .workspace-sheet-toolbar {
    min-height: 88px;
  }

  .workspace-sheet-settings-actions,
  .workspace-sheet-picker-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-jaimini-karakas {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-jaimini-label,
  .settings-jaimini-options,
  .settings-jaimini-description {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .settings-jaimini-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-jaimini-options [role="radio"] {
    min-width: 0;
    min-height: 44px;
  }
}

/* Local-first runtime ----------------------------------------------------- */
.account-runtime-status {
  --runtime-color: #9b7627;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--runtime-color) 36%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--runtime-color) 8%, transparent);
  color: inherit;
}

.account-runtime-status[data-calculation-state="ready"] { --runtime-color: #38755b; }
.account-runtime-status[data-calculation-state="unavailable"],
.account-runtime-status[data-calculation-state="error"] { --runtime-color: #a5453f; }

.account-runtime-status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--runtime-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--runtime-color) 18%, transparent);
}

.account-runtime-status-copy {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

.account-runtime-status-copy strong {
  overflow: hidden;
  max-width: 210px;
  font-size: .68rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-runtime-status-copy small {
  margin-top: 2px;
  color: var(--vs-account-muted);
  font-size: .6rem;
}

.account-runtime-status > button {
  display: grid;
  width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.account-runtime-status > button:hover,
.account-runtime-status > button:focus-visible {
  background: color-mix(in srgb, var(--runtime-color) 14%, transparent);
}

.account-runtime-status[data-runtime-presentation="compact"] {
  gap: 6px;
  min-width: 0;
  min-height: 24px;
  padding: 3px 5px;
  border-color: transparent;
  background: transparent;
}

.account-runtime-status[data-runtime-presentation="compact"] .account-runtime-status-dot {
  width: 7px;
  height: 7px;
  box-shadow: none;
}

.account-runtime-status[data-runtime-presentation="compact"] .account-runtime-status-copy {
  display: flex;
  align-items: center;
  line-height: 1;
}

.account-runtime-status[data-runtime-presentation="compact"] .account-runtime-status-copy :is(strong, small) {
  max-width: 190px;
  margin: 0;
  overflow: hidden;
  font-size: .66rem;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-runtime-status[data-runtime-presentation="compact"][data-calculation-state="ready"] .account-runtime-status-copy strong,
.account-runtime-status[data-runtime-presentation="compact"][data-calculation-state="checking"] .account-runtime-status-copy small,
.account-runtime-status[data-runtime-presentation="compact"] > [data-retry-local-calculation] {
  display: none !important;
}

.calculation-unavailable {
  display: grid;
  min-height: 180px;
  padding: 24px;
  place-content: center;
  text-align: center;
  border: 1px dashed rgba(134, 107, 62, .28);
  border-radius: 12px;
  background: rgba(255, 252, 246, .74);
}

.calculation-unavailable strong {
  font-family: Literata, Georgia, serif;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 500;
}

.calculation-unavailable p {
  max-width: 46ch;
  margin: 7px auto 0;
  color: var(--vs-account-muted);
  font-size: .78rem;
  line-height: 1.45;
}

.calculation-unavailable button {
  justify-self: center;
  margin-top: 14px;
}

.local-location-fields {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.local-location-fields > label { grid-column: 1 / -1; }

.local-location-results {
  display: grid;
  grid-column: 1 / -1;
  gap: 4px;
}

.local-location-results[hidden] { display: none; }
.local-location-results button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(134, 107, 62, .2);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.local-location-results button small { color: var(--vs-account-muted); }

.local-location-results-message {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(134, 107, 62, .24);
  border-radius: 8px;
  background: rgba(247, 242, 229, .92);
  color: var(--vs-account-muted);
  font-size: .82rem;
  line-height: 1.35;
}
@media (max-width: 980px) {
  .account-runtime-status-copy strong { max-width: 135px; }
  .account-runtime-status { min-width: 0; }
}

@media (max-width: 760px) {
  .account-runtime-status {
    position: fixed;
    z-index: 45;
    top: 7px;
    right: 52px;
    max-width: calc(100vw - 116px);
    padding: 5px 7px;
    background: rgba(250, 247, 239, .94);
    backdrop-filter: blur(10px);
  }

  .account-runtime-status-copy strong { max-width: 145px; }
  .account-runtime-status > button { width: 20px; height: 20px; }

  .account-runtime-status[data-runtime-presentation="compact"] {
    padding: 3px 5px;
    border-color: transparent;
    background: transparent;
    backdrop-filter: none;
  }

  .account-runtime-status[data-runtime-presentation="expanded"] {
    color: var(--vs-account-ink);
  }
  .local-location-fields { grid-template-columns: minmax(0, 1fr); }
}

/* CalculationSnapshot-backed Yoga widget -------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.workspace-row > .workspace-widget[data-widget-type="yogas"] {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
  grid-template-rows: 64px minmax(0, 1fr);
  min-height: 0;
}

.yogas-widget > .workspace-widget-body {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.yogas-widget .workspace-widget-header {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-rows: 32px 26px;
  gap: 0 5px;
  height: 64px;
  min-height: 64px;
  padding: 2px 5px;
}

.yogas-widget .workspace-widget-drag-handle {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}

.yogas-widget .workspace-widget-title {
  grid-column: 2;
  grid-row: 1;
}

.yogas-widget .workspace-widget-actions {
  grid-column: 3;
  grid-row: 1;
}

.yogas-widget > .workspace-widget-inserter-bottom {
  top: auto;
  right: 50%;
  bottom: -11px;
  transform: translateX(50%);
}

.yogas-widget:hover > .workspace-widget-inserter-bottom,
.yogas-widget:focus-within > .workspace-widget-inserter-bottom,
.yogas-widget > .workspace-widget-inserter-bottom:focus-visible {
  transform: translateX(50%) scale(1.04);
}

.yoga-widget-header-meta {
  grid-column: 2 / span 2;
  grid-row: 2;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.yoga-widget-header-meta::-webkit-scrollbar {
  display: none;
}

.yogas-widget .workspace-widget-header .yoga-widget-header-meta {
  grid-column: 2 / 4;
  grid-row: 2;
  width: 100%;
  padding: 0 0 2px;
}

.yoga-widget-header-meta > * {
  flex: 0 0 auto;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yoga-widget-header-control {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 20px;
  padding: 0 !important;
  border: 1px solid var(--vs-account-line, var(--line));
  border-radius: 999px;
  background: var(--vs-account-surface, #fffdfa);
}

.yoga-widget-header-control.workspace-widget-source { width: 82px; max-width: 82px; }
.yoga-widget-header-control.yoga-widget-varga { width: 86px; max-width: 86px; }
.yoga-widget-header-control.workspace-widget-method { width: 76px; max-width: 76px; }

.yoga-widget-header-control select {
  width: 100%;
  min-width: 0;
  height: 19px;
  padding: 1px 15px 1px 6px;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--vs-account-ink, var(--ink));
  cursor: pointer;
  font: inherit;
  font-size: .57rem;
  font-weight: 750;
  line-height: 1;
  text-overflow: ellipsis;
}

.yoga-widget-header-control:focus-within {
  border-color: var(--vs-account-gold, #a48142);
  outline: 2px solid color-mix(in srgb, var(--vs-account-gold, #a48142) 22%, transparent);
  outline-offset: 1px;
}

.yoga-widget-varga,
.yoga-widget-count,
.yoga-widget-methodology-link,
.yoga-widget-methodology-unavailable {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid var(--vs-account-line, var(--line));
  border-radius: 999px;
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .58rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.yoga-widget-count {
  justify-content: center;
  min-width: 22px;
  border-color: color-mix(in srgb, var(--vs-account-gold, #a48142) 42%, var(--vs-account-line, var(--line)));
  color: var(--vs-account-ink, var(--ink));
  font-variant-numeric: tabular-nums;
}

.yoga-widget-methodology-link:hover,
.yoga-widget-methodology-link:focus-visible,
.yoga-view-help:hover,
.yoga-view-help:focus-visible,
.yoga-methodology-link:hover,
.yoga-methodology-link:focus-visible {
  border-color: var(--vs-account-gold, #a48142);
  color: var(--vs-account-ink, var(--ink));
  outline: 2px solid color-mix(in srgb, var(--vs-account-gold, #a48142) 24%, transparent);
  outline-offset: 1px;
}

.yoga-widget-methodology-unavailable {
  opacity: .62;
}

.yogas-view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.yogas-view--unavailable {
  grid-template-rows: auto minmax(0, 1fr);
}

.yoga-view-scroll--unavailable {
  display: grid;
  place-items: center;
  padding: 12px;
}

.yoga-view-scroll--unavailable .calculation-unavailable {
  width: min(100%, 430px);
}

.yoga-view-filters {
  display: grid;
  grid-template-columns: minmax(74px, .85fr) minmax(92px, 1fr) minmax(82px, 1.1fr) 30px;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 6px 8px;
  border-bottom: 1px solid var(--vs-account-line, var(--line));
  background: color-mix(in srgb, var(--vs-account-surface, #fffdfa) 96%, var(--vs-account-bg, #f5f2ea));
}

.yoga-view-filter,
.yoga-view-search {
  min-width: 0;
}

.yoga-view-filters select,
.yoga-view-filters input {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  height: 30px;
  padding: 3px 6px;
  border: 1px solid var(--vs-account-line, var(--line));
  border-radius: 6px;
  background: var(--vs-account-surface, #fffdfa);
  color: var(--vs-account-ink, var(--ink));
  font: inherit;
  font-size: .64rem;
}

.yoga-view-help {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--vs-account-line, var(--line));
  border-radius: 6px;
  background: transparent;
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .7rem;
  font-weight: 800;
  text-decoration: none;
}

.yoga-view-scroll {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block-start: 28px;
}

.yoga-view-group {
  position: relative;
  margin: 0;
}

.yoga-view-category-sticky {
  position: sticky;
  z-index: 2;
  top: 0;
  min-height: 27px;
  margin: 0;
  padding: 6px 9px 5px;
  border-bottom: 1px solid var(--vs-account-line, var(--line));
  background: var(--vs-account-surface, #fffdfa);
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .6rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.yoga-view-group-rows {
  margin: 0;
}

.yoga-view-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 5px 9px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--vs-account-line, var(--line));
  border-radius: 0;
  background: transparent;
  color: var(--vs-account-ink, var(--ink));
  cursor: pointer;
  font-size: .68rem;
}

.yoga-view-row:hover,
.yoga-view-row.is-selected {
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 9%, transparent);
}

.yoga-view-row:focus {
  outline: 0;
}

.yoga-view-row:focus-visible {
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 10%, transparent);
  outline: 2px solid var(--vs-account-gold, #a48142);
  outline-offset: -2px;
}

.yoga-view-row-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  overflow: hidden;
}

.yoga-view-row-title,
.yoga-view-row-summary,
.yoga-view-row-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yoga-view-row-title {
  color: var(--vs-account-ink, var(--ink));
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.15;
}

.yoga-view-row-summary {
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .62rem;
  font-weight: 560;
  line-height: 1.15;
}

.yoga-view-row-status {
  grid-column: 3;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--vs-account-line, var(--line)) 82%, transparent);
  border-radius: 50%;
  color: var(--vs-account-teal, #176b66);
  font-size: 1rem;
  line-height: 1;
  text-align: right;
}

.yoga-view-empty {
  margin: 0;
  padding: 20px 12px;
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .7rem;
  text-align: center;
}

.yoga-graha {
  font-weight: 850;
}

.yoga-graha--as { color: #8b6b32; }
.yoga-graha--su { color: #d49a13; }
.yoga-graha--mo { color: #73777d; }
.yoga-graha--ma { color: #a43f36; }
.yoga-graha--me { color: #2f7a56; }
.yoga-graha--ju { color: #c36f24; }
.yoga-graha--ve { color: #74519a; }
.yoga-graha--sa { color: #243a68; }
.yoga-graha--ra { color: #77523a; }
.yoga-graha--ke { color: #1f1d1b; }

.yoga-inspector {
  z-index: 30;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  background: var(--vs-account-surface, #fffdfa);
  box-shadow: -16px 0 38px rgba(16, 24, 25, .16);
}

.yoga-inspector--desktop-panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(100%, 420px);
  border-left: 1px solid var(--vs-account-line, var(--line));
}

.yoga-inspector-header,
.yoga-inspector-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--vs-account-line, var(--line));
}

.yoga-inspector-header > div {
  min-width: 0;
}

.yoga-inspector-header h2,
.yoga-inspector-header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yoga-inspector-header h2 {
  margin: 2px 0 0;
  font-size: .86rem;
}

.yoga-inspector-header span,
.yoga-inspector-actions span {
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .6rem;
}

.yoga-inspector-header button {
  flex: 0 0 auto;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
}

.yoga-inspector-scroll {
  min-width: 0;
  min-height: 0;
  padding: 4px 10px 12px;
  overflow: auto;
  overscroll-behavior: contain;
}

.yoga-inspector-section h3,
.yoga-inspector-checks h3 {
  margin: 10px 0 5px;
  font-size: .7rem;
}

.yoga-inspector-scroll ul,
.yoga-inspector-scroll dl {
  margin: 0;
  padding: 0;
  list-style: none;
}

.yoga-inspector-scroll li,
.yoga-inspector-scroll dt,
.yoga-inspector-scroll dd {
  font-size: .66rem;
  line-height: 1.45;
}

.yoga-inspector-participants li,
.yoga-inspector-checks li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--vs-account-line, var(--line)) 72%, transparent);
}

.yoga-inspector-check-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.yoga-inspector-provenance dl > div {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 8px;
  padding: 3px 0;
}

.yoga-inspector-provenance dd {
  margin: 0;
}

.yoga-methodology-link {
  display: inline-flex;
  margin-top: 7px;
  padding: 5px 8px;
  border: 1px solid var(--vs-account-line, var(--line));
  border-radius: 6px;
  color: var(--vs-account-ink, var(--ink));
  font-size: .66rem;
}

.yoga-inspector-actions {
  border-top: 1px solid var(--vs-account-line, var(--line));
  border-bottom: 0;
}

.yoga-inspector-actions button {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--vs-account-gold, #a48142);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .65rem;
}

.chart-viewer.is-yoga-highlighted {
  outline: 3px solid color-mix(in srgb, var(--vs-account-gold, #a48142) 78%, transparent);
  outline-offset: -3px;
}

.chart-viewer .planet.is-yoga-graha-highlighted {
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  box-shadow: 0 0 0 2px currentColor, 0 0 14px color-mix(in srgb, currentColor 46%, transparent);
}

.chart-viewer .south-cell.is-yoga-house-highlighted {
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 17%, transparent);
  box-shadow: inset 0 0 0 2px var(--vs-account-gold, #a48142);
}

.chart-viewer .north-house-zone.is-yoga-house-highlighted {
  fill: color-mix(in srgb, var(--vs-account-gold, #a48142) 22%, transparent);
  stroke: var(--vs-account-gold, #a48142);
  stroke-width: 1.1;
}

@media (min-width: 761px) {
  .yoga-inspector-backdrop {
    display: none;
  }
}

@media (max-width: 760px) {
  .yogas-widget .workspace-widget-header {
    height: 64px;
    min-height: 64px;
  }

  .yogas-widget .workspace-widget-source,
  .yogas-widget .workspace-widget-method {
    display: inline-flex;
  }

  .yoga-widget-header-meta {
    grid-column: 2 / span 2;
    grid-row: 2;
    width: 100%;
    padding: 0 0 2px;
  }

  .yoga-view-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px;
  }

  .yoga-view-search {
    grid-column: 1 / span 2;
    grid-row: 2;
  }

  .yoga-view-help {
    grid-column: 3;
    grid-row: 1 / span 2;
    min-height: 64px;
  }

  .yoga-inspector-backdrop--mobile {
    position: fixed;
    z-index: 119;
    inset: 0;
    border: 0;
    background: rgba(16, 24, 25, .46);
    backdrop-filter: blur(2px);
  }

  .yoga-inspector--bottom-sheet {
    position: fixed;
    z-index: 120;
    right: 8px;
    bottom: calc(74px + env(safe-area-inset-bottom));
    left: 8px;
    width: auto;
    max-height: min(78svh, 720px);
    border: 1px solid var(--vs-account-line, var(--line));
    border-radius: 18px;
    box-shadow: 0 -18px 52px rgba(16, 24, 25, .22);
  }

  .yoga-inspector-check-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .yoga-inspector-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .yoga-inspector-actions button {
    min-height: 40px;
  }

  body.yoga-inspector-open {
    overflow: hidden;
  }
}

@media (max-width: 390px) {
  .yoga-widget-methodology-link,
  .yoga-widget-methodology-unavailable {
    max-width: 30px;
    color: transparent;
  }

  .yoga-widget-methodology-link::after,
  .yoga-widget-methodology-unavailable::after {
    content: "↗";
    color: var(--vs-account-muted, var(--ink-soft));
  }

  .yoga-view-row-status {
    max-width: 68px;
  }
}

/* Workspace seamless layout ------------------------------------------------
   This final cascade intentionally consolidates the older v2/v4/v5 workspace
   layers above. The DOM keeps the widget header and the chart panel as nested
   grids: header / (toolbar + chart body). */

:root {
  --workspace-surface: var(--vs-account-surface, #fffdfa);
  --workspace-header-surface: color-mix(in srgb, var(--workspace-surface) 94%, var(--vs-account-ink, #1d2927) 6%);
  --workspace-grid-gap: 4px;
  --workspace-widget-header-height: 36px;
  --workspace-chart-toolbar-height: 36px;
}

.workspace-page,
.workspace-canvas,
.workspace-grid,
.workspace-rows,
.workspace-row-shell,
.workspace-row,
.workspace-widget,
.workspace-widget-header,
.workspace-widget-body,
.workspace-widget .chart-viewer,
.workspace-widget .chart-panel,
.workspace-sheet-switcher,
.workspace-sheet-toolbar {
  background: var(--workspace-surface);
}

.workspace-canvas,
.workspace-grid,
.workspace-rows,
.workspace-row-shell,
.workspace-row,
.workspace-widget,
.workspace-widget-header,
.workspace-widget-body,
.workspace-widget .chart-viewer,
.workspace-widget .chart-panel,
.workspace-sheet-switcher,
.workspace-sheet-toolbar {
  border: 0;
  box-shadow: none;
}

.workspace-canvas.workspace-local-view,
#workspace-panel-main.workspace-local-view {
  border: 0;
  background: var(--workspace-surface);
  box-shadow: none;
}

.workspace-canvas,
.workspace-grid,
.workspace-rows,
.workspace-row-shell,
.workspace-row,
.workspace-widget {
  min-width: 0;
  max-width: 100%;
}

.workspace-canvas {
  padding: var(--workspace-grid-gap);
}

.workspace-rows {
  gap: var(--workspace-grid-gap);
}

.workspace-rows:has(> .workspace-row-shell) {
  gap: 0;
}

.workspace-row-shell {
  gap: 0;
  margin-block: 0 var(--workspace-grid-gap);
  container-type: inline-size;
}

.workspace-row {
  align-items: stretch;
  gap: var(--workspace-grid-gap);
}

/* A chart row follows the actual width of one grid column. This removes the
   vertical letterboxing created by the legacy fixed row height without
   changing ChartViewer's square contain-fit geometry. */
@media (min-width: 761px) {
  .workspace-row[style*="--workspace-columns:3;"]:has(> .workspace-widget-chart) {
    grid-auto-rows: min(
      var(--workspace-unit-height),
      calc(33.333cqw + var(--workspace-widget-header-height) - 4px)
    );
  }

  .workspace-row[style*="--workspace-columns:3;"]:has(> .workspace-widget-chart[data-widget-span-x="2"]) {
    grid-auto-rows: min(
      var(--workspace-unit-height),
      calc(66.667cqw + var(--workspace-widget-header-height) - 7px)
    );
  }

  .workspace-row[style*="--workspace-columns:3;"]:has(> .workspace-widget-chart[data-widget-span-x="3"]) {
    grid-auto-rows: var(--workspace-unit-height);
  }
}

.workspace-widget {
  grid-template-rows: var(--workspace-widget-header-height) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: visible;
  border-radius: 0;
  background: var(--workspace-surface);
  box-shadow: none;
}

.workspace-widget:hover,
.workspace-widget:focus-within,
.workspace-widget-chart.is-active-chart .chart-panel {
  border-color: transparent;
  box-shadow: none;
}

.workspace-widget:hover,
.workspace-widget:focus-within {
  outline: none;
}

.workspace-widget-chart::before {
  display: none !important;
  content: none;
}

.workspace-widget.is-tool-focus-highlight {
  outline: none;
  animation: none;
}

.workspace-widget-header {
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  gap: 4px;
  min-height: var(--workspace-widget-header-height);
  height: var(--workspace-widget-header-height);
  padding: 0 4px;
  border-bottom: 0;
  border-radius: 0;
  background: var(--workspace-header-surface);
}

.workspace-widget-drag-handle,
.workspace-widget-actions button,
.workspace-widget [data-open-widget-action-menu] {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.workspace-widget-body {
  border-radius: 0;
}

.workspace-widget-chart {
  grid-template-rows: var(--workspace-widget-header-height) minmax(0, 1fr);
}

.chart-widget {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.workspace-widget-chart .workspace-widget-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: 4px;
  overflow: hidden;
  container-name: workspace-chart-body;
  container-type: size;
}

.chart-widget-body {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.workspace-widget-chart .chart-viewer,
.workspace-widget-chart .chart-panel {
  width: 100% !important;
  height: 100%;
  min-width: 0 !important;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.workspace-widget-chart .chart-panel {
  --chart-size: 100%;
  display: grid;
  grid-template-rows: var(--workspace-chart-toolbar-height) minmax(0, 1fr);
}

.chart-fit-container {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  place-items: center;
}

.workspace-widget-chart .chart-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  height: var(--workspace-chart-toolbar-height);
  max-height: 36px;
  margin: 0;
  padding: 2px 4px;
  overflow: hidden;
  border: 0;
  background: var(--workspace-surface);
  box-shadow: none;
}

.workspace-widget-chart .chart-info,
.workspace-widget-chart .chart-controls,
.workspace-widget-chart .tools {
  min-width: 0;
  max-width: 100%;
}

.workspace-widget-chart .chart-info {
  display: none;
}

.workspace-widget-chart .chart-controls {
  grid-column: 1 / -1;
  width: 100%;
  justify-content: space-between;
}

.workspace-widget-chart .chart-name {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-widget-chart .chart-meta-line {
  display: none;
}

.workspace-widget-chart .chart-controls {
  gap: 4px;
}

.workspace-widget-chart .chart-select,
.workspace-widget-chart .chart-toolbar .icon-button {
  min-height: 32px;
  height: 32px;
  max-height: 32px;
}

.workspace-widget-chart .chart-select {
  width: clamp(104px, 11vw, 142px);
  min-width: 0;
  padding: 0 24px 0 8px;
  border: 0;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--workspace-surface) 88%, var(--vs-account-bg, #f5f2ea));
  font-size: 11px;
}

.workspace-widget-chart .chart-toolbar .icon-button {
  width: 32px;
  min-width: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
}

.workspace-widget-chart .chart-stage,
.chart-viewer-stage {
  width: var(--chart-size);
  height: var(--chart-size);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  isolation: isolate;
  z-index: 0;
  place-self: center;
  margin: 0;
  filter: none;
  transform: none !important;
}

@supports (height: 1cqh) {
  .workspace-widget-chart .chart-panel {
    --chart-size: max(0px, min(100cqw, calc(100cqh - var(--workspace-chart-toolbar-height))));
  }

  .workspace-widget-chart .chart-stage {
    width: var(--chart-size);
    height: var(--chart-size);
  }
}

.workspace-widget-chart .chart-stage > .astro-rings,
.workspace-widget-chart .chart-stage > .south-chart,
.workspace-widget-chart .chart-stage > .north-chart,
.workspace-widget-chart .chart-stage > .nabhasa-chart,
.workspace-widget-chart .chart-stage > .astro-rings > svg {
  transform: none !important;
}

.workspace-widget-chart .chart-stage > .south-chart,
.workspace-widget-chart .chart-stage > .north-chart,
.workspace-widget-chart .chart-stage > .nabhasa-chart {
  transition-property: opacity;
}

/* The outer stage includes the complete nakshatra/pada rings. When that
   layer is absent, the chart itself may use the full fitted square. */
.workspace-widget-chart .chart-stage[data-style="south"][data-rings-visible="false"] > .south-chart,
.workspace-widget-chart .chart-stage[data-style="north"] > .north-chart,
.workspace-widget-chart .chart-stage[data-style="nabhasa"] > .nabhasa-chart {
  inset: 0;
}

.workspace-sheet-switcher {
  position: sticky;
  z-index: 29;
  top: var(--account-topbar-height, 60px);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--workspace-grid-gap);
  min-width: 0;
  min-height: 40px;
  padding: 2px 4px;
  border-bottom: 0;
}

.workspace-sheet-tabs {
  align-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 36px;
}

.workspace-sheet-tab,
.workspace-sheet-tabs [role="tab"] {
  min-height: 36px;
  height: 36px;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
}

.workspace-sheet-tab::after {
  display: block;
  right: 6px;
  bottom: 0;
  left: 6px;
  height: 2px;
}

.workspace-sheet-tab {
  min-width: 80px;
  padding-right: 4px;
}

.workspace-sheet-tabs [role="tab"] {
  padding-inline: 8px 4px;
}

.workspace-sheet-tab.is-active,
.workspace-sheet-tab.active,
.workspace-sheet-tab[aria-selected="true"],
.workspace-sheet-tab:has(> [role="tab"].is-active),
.workspace-sheet-tab:has(> [role="tab"].active),
.workspace-sheet-tab:has(> [role="tab"][aria-selected="true"]) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.workspace-sheet-tab-close {
  width: 28px;
  min-width: 28px;
  height: 28px;
}

.workspace-sheet-add {
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding-inline: 8px;
  border: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--workspace-surface) 88%, var(--vs-account-bg, #f5f2ea));
  box-shadow: none;
}

.workspace-sheet-toolbar,
.workspace-sheet-toolbar.is-stuck {
  border-bottom: 0;
  background: var(--workspace-surface);
  box-shadow: none;
}

/* Yoga widgets retain their information-dense two-line header, but share the
   exact row height and seamless surface of every neighbouring widget. */
.workspace-row > .workspace-widget[data-widget-type="yogas"],
.yogas-widget {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--workspace-surface);
  box-shadow: none;
}

.yogas-widget .workspace-widget-header,
.yogas-widget > .workspace-widget-body,
.yogas-view {
  border-color: transparent;
  border-radius: 0;
  background: var(--workspace-surface);
  box-shadow: none;
}

@media (max-width: 760px) {
  .account-app,
  .account-main,
  .account-view,
  .workspace-page,
  .workspace-canvas,
  .workspace-grid,
  .workspace-rows,
  .workspace-row-shell,
  .workspace-row,
  .workspace-widget {
    min-width: 0;
    max-width: 100%;
  }

  .workspace-page,
  .workspace-canvas,
  .workspace-grid,
  .workspace-rows,
  .workspace-row-shell {
    overflow-x: clip;
  }

  .workspace-canvas {
    padding: var(--workspace-grid-gap) 0;
  }

  .workspace-row-shell {
    margin-bottom: var(--workspace-grid-gap);
  }

  .workspace-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--workspace-grid-gap);
  }

  .workspace-widget,
  .workspace-row > .workspace-widget[data-widget-type="yogas"] {
    grid-column: 1 !important;
    width: 100%;
    height: min(var(--workspace-unit-height, 430px), calc(100svh - 150px));
    min-height: 390px;
  }

  .workspace-widget-chart {
    height: min(
      var(--workspace-unit-height, 430px),
      calc(100cqw + var(--workspace-widget-header-height))
    );
    min-height: 340px;
  }

  .workspace-widget[data-widget-type="timeline"],
  .workspace-widget[data-widget-type="notes"],
  .workspace-widget[data-widget-type="question"] {
    height: auto;
    min-height: 300px;
    max-height: 430px;
  }

  .workspace-widget[data-widget-type="ashtakavarga"],
  .workspace-widget[data-widget-type="transit-ashtakavarga"],
  .workspace-widget[data-widget-type="planet-table"] {
    height: auto;
    max-height: min(620px, calc(100svh - 120px));
  }

  .workspace-widget:not(.yogas-widget) .workspace-widget-header {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-rows: var(--workspace-widget-header-height);
    gap: 4px;
  }

  .workspace-widget:not(.yogas-widget) .workspace-widget-header .method-and-source {
    display: none;
  }

  .workspace-widget-chart .chart-select {
    width: clamp(96px, 34vw, 128px);
  }

  .workspace-sheet-switcher {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: var(--workspace-grid-gap);
    width: 100%;
    min-height: 40px;
    padding: 2px 0;
  }

  .workspace-sheet-tabs {
    display: none !important;
  }

  .workspace-sheet-mobile {
    display: grid !important;
    min-width: 0;
    width: 100%;
  }

  .workspace-sheet-mobile select,
  .workspace-sheet-add {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    height: 36px;
    border: 0;
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--workspace-surface) 86%, var(--vs-account-bg, #f5f2ea));
    box-shadow: none;
  }

  .workspace-sheet-mobile select {
    padding: 0 28px 0 8px;
    overflow: hidden;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-sheet-add {
    padding: 0;
  }
}

@media (max-width: 390px) {
  .account-main,
  .workspace-page,
  .workspace-canvas,
  .workspace-grid,
  .workspace-rows,
  .workspace-row-shell,
  .workspace-row,
  .workspace-widget,
  .workspace-widget-body,
  .workspace-widget-chart .chart-viewer,
  .workspace-widget-chart .chart-panel,
  .workspace-widget-chart .chart-toolbar,
  .workspace-sheet-switcher,
  .workspace-sheet-mobile {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .workspace-widget-chart .chart-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .workspace-widget-chart .chart-select {
    width: clamp(92px, 32vw, 116px);
  }

  .workspace-widget-chart .chart-toolbar .icon-button {
    width: 32px;
    min-width: 32px;
  }
}

/* Seamless variants need the same specificity as their legacy card rules. */
.workspace-page :is(
  .workspace-placeholder,
  .placeholder-widget,
  .widget-placeholder,
  .workspace-mock-widget,
  .mock-widget,
  .ashtakavarga-panel,
  .ashtakavarga-widget,
  .workspace-widget[data-widget-type="placeholder"],
  .workspace-widget[data-widget-render="mock"],
  .workspace-widget[data-widget-type="ashtakavarga"],
  .workspace-widget[data-widget-type="transit-ashtakavarga"]
) {
  border: 0;
  border-radius: 0;
  background: var(--workspace-surface);
  box-shadow: none;
}

/* Karakas keeps its compact selector in a real second header row. */
.karakas-widget {
  grid-template-rows: auto minmax(0, 1fr);
}

.workspace-widget.karakas-widget > .workspace-widget-header.karakas-widget-header {
  grid-template-columns: 32px minmax(0, 1fr) auto 32px;
  grid-template-rows: 32px auto;
  gap: 2px 4px;
  height: auto;
  min-height: 68px;
  padding: 2px 4px 4px;
  overflow: visible;
}

.karakas-widget-header > .workspace-widget-drag-handle {
  grid-column: 1;
  grid-row: 1;
}

.karakas-widget-header > .karakas-widget-heading {
  grid-column: 2;
  grid-row: 1;
}

.karakas-widget-header > .method-and-source {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
}

.karakas-widget-header > .workspace-widget-actions {
  grid-column: 4;
  grid-row: 1;
}

.karakas-widget-header > .karakas-widget-controls {
  grid-column: 2 / 5;
  grid-row: 2;
  min-width: 0;
  padding: 0 0 2px;
  overflow: visible;
}

.karakas-widget-header .karakas-scheme-control [role="radio"] {
  min-height: 30px;
}

/* Explicit mobile worksheet picker. The native select remains in the
   accessibility tree as a visually hidden fallback. */
.workspace-sheet-mobile-trigger,
.workspace-sheet-mobile-dialog {
  display: none;
}

@media (max-width: 760px) {
  .workspace-widget.karakas-widget > .workspace-widget-header.karakas-widget-header {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    grid-template-rows: 32px auto;
    min-height: 76px;
    padding-bottom: 4px;
    overflow: visible;
  }

  .karakas-widget-header > .karakas-widget-heading {
    grid-column: 2;
  }

  .karakas-widget-header > .method-and-source {
    display: none;
  }

  .karakas-widget-header > .workspace-widget-actions {
    grid-column: 3;
  }

  .karakas-widget-header > .karakas-widget-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .karakas-widget-header .karakas-scheme-control {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .karakas-widget-header .karakas-scheme-control [role="radio"] {
    min-height: 38px;
  }

  .workspace-sheet-mobile,
  .workspace-sheet-mobile-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .workspace-sheet-mobile select,
  .workspace-sheet-mobile-native select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .workspace-sheet-mobile-trigger {
    display: flex;
    grid-column: 1;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding: 0 10px;
    overflow: hidden;
    border: 0;
    border-radius: 4px;
    background: color-mix(in srgb, var(--workspace-surface) 86%, var(--vs-account-bg, #f5f2ea));
    color: var(--vs-account-ink);
    font: inherit;
    font-size: .72rem;
    font-weight: 750;
    text-align: left;
    box-shadow: none;
  }

  .workspace-sheet-mobile-trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-sheet-mobile-trigger::after {
    flex: 0 0 auto;
    content: "⌄";
    color: var(--vs-account-muted);
    font-size: .8rem;
  }

  .workspace-sheet-mobile-trigger:focus-visible {
    outline: 2px solid var(--vs-account-gold, #a48142);
    outline-offset: 2px;
  }

  .workspace-sheet-mobile-dialog:not([hidden]),
  .workspace-sheet-mobile-dialog[open],
  .workspace-sheet-mobile-dialog.is-open {
    position: fixed;
    z-index: 130;
    inset: 0;
    display: grid;
    align-items: end;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 8px 8px calc(76px + env(safe-area-inset-bottom));
    overflow: hidden;
    border: 0;
    background: transparent;
  }

  .workspace-sheet-mobile-dialog::backdrop {
    background: rgba(16, 24, 25, .46);
    backdrop-filter: blur(2px);
  }

  .workspace-sheet-mobile-backdrop,
  .workspace-sheet-mobile-dialog-backdrop {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(16, 24, 25, .46);
    backdrop-filter: blur(2px);
  }

  .workspace-sheet-mobile-panel,
  .workspace-sheet-mobile-dialog-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-self: end;
    justify-self: center;
    width: min(100%, 520px);
    min-width: 0;
    max-height: min(72svh, 640px);
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: var(--workspace-surface);
    box-shadow: 0 -18px 52px rgba(16, 24, 25, .2);
  }

  .workspace-sheet-mobile-panel > header,
  .workspace-sheet-mobile-dialog-panel > header,
  .workspace-sheet-mobile-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 6px 8px 6px 12px;
    border: 0;
    background: var(--workspace-header-surface, var(--workspace-surface));
  }

  .workspace-sheet-mobile-panel > header h2,
  .workspace-sheet-mobile-dialog-panel > header h2,
  .workspace-sheet-mobile-dialog-header h2 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-sheet-mobile-panel > header button,
  .workspace-sheet-mobile-dialog-panel > header button,
  .workspace-sheet-mobile-dialog-header button,
  .workspace-sheet-mobile-close,
  .workspace-sheet-mobile-dialog-close {
    flex: 0 0 auto;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--vs-account-ink);
    font: inherit;
  }

  .workspace-sheet-mobile-list,
  .workspace-sheet-mobile-dialog-list {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 4px;
    overflow: auto;
    overscroll-behavior: contain;
    list-style: none;
    scrollbar-gutter: stable;
  }

  .workspace-sheet-mobile-option,
  .workspace-sheet-mobile-dialog-option,
  .workspace-sheet-mobile-list > button,
  .workspace-sheet-mobile-list > li > button,
  .workspace-sheet-mobile-list [data-workspace-sheet-option],
  .workspace-sheet-mobile-dialog-list > button,
  .workspace-sheet-mobile-dialog-list > li > button,
  .workspace-sheet-mobile-dialog-list [data-workspace-sheet-option],
  [data-workspace-sheet-mobile-option] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--vs-account-ink);
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    text-align: left;
  }

  .workspace-sheet-mobile-option:hover,
  .workspace-sheet-mobile-dialog-option:hover,
  .workspace-sheet-mobile-list > button:hover,
  .workspace-sheet-mobile-list > li > button:hover,
  .workspace-sheet-mobile-list [data-workspace-sheet-option]:hover,
  .workspace-sheet-mobile-dialog-list > button:hover,
  .workspace-sheet-mobile-dialog-list > li > button:hover,
  .workspace-sheet-mobile-dialog-list [data-workspace-sheet-option]:hover,
  [data-workspace-sheet-mobile-option]:hover {
    background: color-mix(in srgb, var(--workspace-surface) 94%, var(--vs-account-accent, var(--teal)));
  }

  .workspace-sheet-mobile-option.is-active,
  .workspace-sheet-mobile-option[aria-current="true"],
  .workspace-sheet-mobile-option[aria-selected="true"],
  .workspace-sheet-mobile-dialog-option.is-active,
  .workspace-sheet-mobile-dialog-option[aria-current="true"],
  .workspace-sheet-mobile-dialog-option[aria-selected="true"],
  .workspace-sheet-mobile-list [data-workspace-sheet-option].is-active,
  .workspace-sheet-mobile-list [data-workspace-sheet-option][aria-current="true"],
  .workspace-sheet-mobile-list [data-workspace-sheet-option][aria-selected="true"],
  .workspace-sheet-mobile-dialog-list [data-workspace-sheet-option].is-active,
  .workspace-sheet-mobile-dialog-list [data-workspace-sheet-option][aria-current="true"],
  .workspace-sheet-mobile-dialog-list [data-workspace-sheet-option][aria-selected="true"],
  [data-workspace-sheet-mobile-option].is-active,
  [data-workspace-sheet-mobile-option][aria-current="true"],
  [data-workspace-sheet-mobile-option][aria-selected="true"] {
    background: color-mix(in srgb, var(--workspace-surface) 90%, var(--vs-account-accent, var(--teal)));
    color: var(--vs-account-ink);
  }

  .workspace-sheet-mobile-option:focus-visible,
  .workspace-sheet-mobile-dialog-option:focus-visible,
  .workspace-sheet-mobile-list button:focus-visible,
  .workspace-sheet-mobile-dialog-list button:focus-visible,
  .workspace-sheet-mobile-close:focus-visible,
  .workspace-sheet-mobile-dialog-close:focus-visible {
    outline: 2px solid var(--vs-account-accent, var(--teal));
    outline-offset: -2px;
  }
}

/* Keep quick-chart framing authoritative after legacy workspace overrides. */
.workspace-page { gap: 4px; }
.workspace-compact-header[data-active-chart-header] {
  min-height: 36px;
  padding: 0 2px;
}

@media (max-width: 760px) {
  .workspace-compact-header[data-active-chart-header] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
    min-height: 70px;
    padding: 4px 0;
  }

  .workspace-active-chart-summary {
    display: grid;
    gap: 2px;
  }

  .workspace-header-actions { display: none; }
  .workspace-mobile-chart-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .quick-chart-entry { display: none; }
}

.unsaved-chart-dialog:not([hidden]) {
  position: fixed;
  z-index: 160;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
}

.unsaved-chart-dialog > .workspace-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(16, 24, 25, .46);
}

.unsaved-chart-panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  padding: 18px;
  border-radius: 14px;
  background: var(--workspace-surface, #fffdfa);
  box-shadow: 0 24px 62px rgba(16, 24, 25, .25);
}

.unsaved-chart-panel h2 { margin: 0; font-size: 1rem; }
.unsaved-chart-panel p { color: var(--vs-account-muted); font-size: .76rem; line-height: 1.45; }
.unsaved-chart-panel > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.unsaved-chart-panel button {
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .7rem;
}
.unsaved-chart-panel [data-unsaved-chart-action="recalculate"] {
  background: var(--vs-account-gold, #a48142);
  color: var(--vs-account-ink, var(--ink));
}
@media (max-width: 760px) {
  .unsaved-chart-dialog:not([hidden]) { align-items: end; padding: 8px 8px calc(76px + env(safe-area-inset-bottom)); }
  .unsaved-chart-panel { border-radius: 16px; }
  .unsaved-chart-panel > div { display: grid; grid-template-columns: 1fr; }
}

.workspace-page .workspace-widget-chart .chart-meta {
  display: none;
}

@media (min-width: 761px) {
  .quick-chart-entry {
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    padding: 2px 4px 1px;
  }
  .quick-chart-entry :is(input, select),
  .quick-chart-calculate,
  .quick-chart-extended { height: 32px; }
  .quick-chart-location-results { top: 34px; }
  .quick-chart-message,
  .quick-chart-subscription { top: 36px; }
}

/* Bhrigu Chakra Paddhati: meaning-first UI built from the active natal snapshot. */
.bhrigu-tabs,
.bhrigu-mode-switch,
.bhrigu-year-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bhrigu-tabs {
  border-bottom: 1px solid var(--vs-account-line);
}

.bhrigu-tabs button,
.bhrigu-mode-switch button,
.bhrigu-year-nav button,
.bhrigu-compact-action,
.bhrigu-view button,
.bhrigu-help-panel button {
  border: 1px solid var(--vs-account-line);
  border-radius: 3px;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  cursor: pointer;
}

.bhrigu-tabs button {
  min-height: 30px;
  padding: 4px 9px;
  border-width: 0 0 2px;
  border-color: transparent;
  color: var(--vs-account-muted);
  font-size: .72rem;
  font-weight: 700;
}

.bhrigu-tabs button[aria-selected="true"] {
  border-bottom-color: var(--vs-account-accent);
  color: var(--vs-account-ink);
}

.bhrigu-compact,
.bhrigu-view {
  color: var(--vs-account-ink);
}

.bhrigu-compact {
  display: grid;
  align-content: start;
  gap: 11px;
  min-height: 0;
  padding: 12px;
  overflow: auto;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--vs-account-accent) 7%, transparent), transparent 56%),
    var(--vs-account-surface-solid);
}

.bhrigu-compact-kicker,
.bhrigu-eyebrow,
.bhrigu-story-section > span,
.bhrigu-story-section > small {
  color: color-mix(in srgb, var(--vs-account-accent) 72%, var(--vs-account-ink));
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.bhrigu-compact h3,
.bhrigu-view h2,
.bhrigu-view h3,
.bhrigu-view p {
  margin: 0;
}

.bhrigu-compact-year {
  display: grid;
  gap: 1px;
}

.bhrigu-compact-year strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.18rem, 2vw, 1.42rem);
  font-weight: 500;
}

.bhrigu-compact-year time,
.bhrigu-compact-why,
.bhrigu-technical-chain {
  color: var(--vs-account-muted);
  font-size: .74rem;
}

.bhrigu-compact-summary {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .96rem;
  line-height: 1.48;
}

.bhrigu-compact-action,
.bhrigu-primary-action {
  min-height: 34px;
  padding: 7px 11px;
  border-color: color-mix(in srgb, var(--vs-account-accent) 42%, var(--vs-account-line));
  background: color-mix(in srgb, var(--vs-account-accent) 10%, var(--vs-account-surface-solid));
  font-size: .73rem;
  font-weight: 750;
}

.bhrigu-view {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: clamp(14px, 2.4vw, 26px);
  background:
    radial-gradient(circle at 96% 0, color-mix(in srgb, var(--vs-account-accent) 10%, transparent), transparent 33%),
    var(--vs-account-surface-solid);
}

.bhrigu-view-header,
.bhrigu-view-toolbar,
.bhrigu-full-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bhrigu-view-header > div {
  min-width: 0;
}

.bhrigu-view-header h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 3.3vw, 2.35rem);
  font-weight: 500;
  line-height: 1.08;
}

.bhrigu-year-nav {
  justify-content: center;
}

.bhrigu-year-nav button {
  min-height: 34px;
  padding: 6px 10px;
}

.bhrigu-year-nav strong {
  min-width: min(34vw, 230px);
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 500;
}

.bhrigu-period-label {
  color: var(--vs-account-muted);
  text-align: center;
  font-size: .76rem;
}

.bhrigu-year-rule {
  display: grid;
  gap: 5px;
  max-width: 76ch;
  padding: 12px 14px;
  border-left: 2px solid color-mix(in srgb, var(--vs-account-accent) 58%, transparent);
  background: color-mix(in srgb, var(--vs-account-accent) 6%, var(--vs-account-surface-solid));
}

.bhrigu-year-rule strong {
  font-size: .82rem;
}

.bhrigu-year-rule p {
  color: var(--vs-account-muted);
  font-size: .78rem;
  line-height: 1.5;
}

.bhrigu-main-conclusion {
  display: grid;
  gap: 8px;
  max-width: 72ch;
  padding: clamp(14px, 2vw, 22px) 0;
  border-block: 1px solid var(--vs-account-line);
}

.bhrigu-main-conclusion h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.22rem, 2.5vw, 1.78rem);
  font-weight: 500;
  line-height: 1.25;
}

.bhrigu-story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--vs-account-line);
  border: 1px solid var(--vs-account-line);
}

.bhrigu-story-section {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  background: color-mix(in srgb, var(--vs-account-surface-solid) 96%, var(--vs-account-accent));
}

.bhrigu-story-section strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 500;
}

.bhrigu-story-section p,
.bhrigu-story-section li {
  font-size: .79rem;
  line-height: 1.55;
}

.bhrigu-story-section ul,
.bhrigu-technical-list,
.bhrigu-confirmations {
  margin: 0;
  padding-left: 18px;
}

.bhrigu-mode-switch {
  padding: 2px;
  border: 1px solid var(--vs-account-line);
  background: color-mix(in srgb, var(--vs-account-surface-solid) 86%, transparent);
}

.bhrigu-mode-switch button {
  min-height: 27px;
  padding: 4px 9px;
  border: 0;
  font-size: .7rem;
}

.bhrigu-mode-switch button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--vs-account-accent) 15%, var(--vs-account-surface-solid));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vs-account-accent) 32%, transparent);
}

.bhrigu-technical-chain {
  padding: 10px 12px;
  border-left: 2px solid color-mix(in srgb, var(--vs-account-accent) 58%, transparent);
  background: color-mix(in srgb, var(--vs-account-accent) 5%, transparent);
  line-height: 1.55;
}

.bhrigu-confirmation-placeholder,
.bhrigu-unavailable {
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--vs-account-muted) 40%, transparent);
  color: var(--vs-account-muted);
  background: color-mix(in srgb, var(--vs-account-surface-solid) 86%, transparent);
  font-size: .78rem;
}

.bhrigu-life-line {
  display: grid;
  grid-template-columns: repeat(108, minmax(34px, 1fr));
  gap: 3px;
  padding: 4px 0 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.bhrigu-life-year {
  display: grid;
  place-items: center;
  min-width: 34px;
  min-height: 38px;
  padding: 3px;
  border: 1px solid var(--vs-account-line);
  border-radius: 2px;
  background: transparent;
  color: var(--vs-account-muted);
  font-size: .68rem;
  scroll-snap-align: center;
}

.bhrigu-life-year[data-same-house="true"] {
  border-color: color-mix(in srgb, var(--vs-account-accent) 44%, var(--vs-account-line));
  color: var(--vs-account-ink);
}

.bhrigu-life-year[aria-current="true"],
.bhrigu-life-year.is-selected {
  background: var(--vs-account-accent);
  color: var(--ivory);
  border-color: var(--vs-account-accent);
}

.bhrigu-repetitions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.bhrigu-repetitions button {
  padding: 5px 8px;
  font-size: .72rem;
}

.workspace-widget[data-widget-type="bhrigu-cycles"] > .workspace-widget-body {
  min-height: 0;
  padding: 0;
  overflow: auto;
}

.workspace-widget[data-widget-type="bhrigu-cycles"][data-bhrigu-presentation="timeline"] > .workspace-widget-body {
  overflow: visible;
}

.bhrigu-help-dialog:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 20px;
}

.bhrigu-help-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  width: min(620px, 100%);
  max-height: min(720px, calc(100svh - 40px));
  padding: 22px;
  overflow: auto;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
  background: var(--vs-account-surface-solid);
  box-shadow: 0 24px 80px rgba(20, 32, 30, .18);
}

.bhrigu-help-panel header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.bhrigu-help-panel header span {
  color: var(--vs-account-muted);
  font-size: .7rem;
}

.bhrigu-help-panel header h2 {
  margin: 2px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

.bhrigu-help-panel ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}

.bhrigu-help-panel p {
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .78rem;
}

.bhrigu-help-panel header button {
  width: 32px;
  height: 32px;
}

.bhrigu-help-done {
  justify-self: end;
  min-height: 34px;
  padding: 6px 14px;
  background: color-mix(in srgb, var(--vs-account-accent) 13%, var(--vs-account-surface-solid)) !important;
}

/* Persistent Bhrigu layer; it coexists with Yoga and context-menu markers. */
.chart-viewer.is-bhrigu-highlighted {
  outline: 1px solid color-mix(in srgb, var(--vs-account-accent) 28%, transparent);
  outline-offset: -1px;
}

.chart-viewer .south-cell.is-bhrigu-active-house {
  background: color-mix(in srgb, var(--vs-account-accent) 11%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--vs-account-accent) 52%, transparent);
}

.chart-viewer .south-cell.is-bhrigu-lord-house:not(.is-bhrigu-active-house) {
  background: color-mix(in srgb, var(--vs-account-accent) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-account-accent) 32%, transparent);
}

.chart-viewer .north-house-zone.is-bhrigu-active-house {
  fill: color-mix(in srgb, var(--vs-account-accent) 17%, transparent);
}

.chart-viewer .north-house-zone.is-bhrigu-lord-house:not(.is-bhrigu-active-house) {
  fill: color-mix(in srgb, var(--vs-account-accent) 9%, transparent);
}

.chart-viewer .planet.is-bhrigu-lord-graha,
.chart-viewer .planet.is-bhrigu-leading-graha {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vs-account-accent) 42%, transparent);
  background: color-mix(in srgb, var(--vs-account-accent) 13%, var(--vs-account-surface-solid));
}

.chart-viewer .planet.is-bhrigu-leading-graha {
  text-decoration: underline;
  text-decoration-color: var(--vs-account-accent);
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .workspace-widget[data-widget-type="bhrigu-cycles"] {
    height: auto;
    min-height: 0;
  }

  .bhrigu-view {
    padding: 15px 12px;
  }

  .bhrigu-view-header,
  .bhrigu-view-toolbar,
  .bhrigu-full-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .bhrigu-mode-switch {
    align-self: start;
  }

  .bhrigu-story {
    grid-template-columns: 1fr;
  }

  .bhrigu-tabs {
    overflow-x: auto;
  }

  .bhrigu-tabs button {
    flex: 0 0 auto;
  }

  .bhrigu-help-dialog:not([hidden]) {
    align-items: end;
    padding: 8px 8px calc(76px + env(safe-area-inset-bottom));
  }

  .bhrigu-help-panel {
    max-height: min(82svh, 720px);
    padding: 18px 15px;
    border-radius: 12px;
  }
}

/* Compact Transits presentation. Its shell is the shared workspace widget;
   only the Bhrigu-specific information hierarchy is defined here. */
.bhrigu-widget-header {
  grid-template-columns: 28px minmax(0, 1fr) 32px 30px;
}

.bhrigu-widget-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.bhrigu-widget-title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bhrigu-widget-help {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--vs-account-line);
  border-radius: 50%;
  background: transparent;
  color: var(--vs-account-muted);
  font: 600 13px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}

.bhrigu-widget-help:hover,
.bhrigu-widget-help:focus-visible {
  border-color: var(--workspace-line-hover, var(--vs-account-line-strong));
  color: var(--vs-account-ink);
}

.bhrigu-transits-widget {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 12px;
  gap: 0;
  background: var(--workspace-widget-surface, var(--vs-account-surface-solid)) !important;
  color: var(--vs-account-ink);
  font-family: Inter, system-ui, sans-serif;
}

.bhrigu-transits-widget :is(h3, h4, p) {
  margin: 0;
}

.bhrigu-transits-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--workspace-line, var(--vs-account-line));
}

.bhrigu-transits-metric {
  min-width: 0;
  padding: 8px 12px 12px;
}

.bhrigu-transits-metric + .bhrigu-transits-metric {
  border-left: 1px solid var(--workspace-line, var(--vs-account-line));
}

.bhrigu-transits-metric > div {
  display: flex;
  align-items: baseline;
  min-height: 44px;
  gap: 7px;
}

.bhrigu-transits-metric > div > strong {
  color: var(--vs-account-ink);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.bhrigu-transits-metric > div > span {
  color: var(--vs-account-muted);
  font-size: 13px;
  font-weight: 500;
}

.bhrigu-transits-metric > p {
  color: var(--vs-account-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.bhrigu-transits-desktop-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 3px;
}

.bhrigu-transits-desktop-nav button,
.bhrigu-transits-mobile-nav button,
.bhrigu-transits-current {
  min-width: 44px;
  min-height: 44px;
  padding: 5px 9px;
  border: 1px solid var(--workspace-line, var(--vs-account-line));
  border-radius: 7px;
  background: transparent;
  color: var(--vs-account-ink);
  font: 500 13px/1.2 Inter, system-ui, sans-serif;
  cursor: pointer;
}

.bhrigu-transits-desktop-nav button {
  padding: 0;
  font-size: 19px;
}

.bhrigu-transits-desktop-nav button:disabled,
.bhrigu-transits-mobile-nav button:disabled {
  cursor: default;
  opacity: .38;
}

.bhrigu-transits-period {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 7px 12px;
  gap: 10px;
  border-bottom: 1px solid var(--workspace-line, var(--vs-account-line));
}

.bhrigu-transits-period > span,
.bhrigu-transits-evidence-grid > div > span {
  color: var(--vs-account-muted);
  font-size: 12px;
  font-weight: 500;
}

.bhrigu-transits-period time {
  min-width: 0;
  color: var(--vs-account-ink);
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.bhrigu-transits-current {
  min-height: 34px;
  margin-left: auto;
  padding-inline: 10px;
  white-space: nowrap;
}

.bhrigu-transits-mobile-nav {
  display: none;
}

.bhrigu-transits-themes,
.bhrigu-transits-evidence {
  display: grid;
  gap: 7px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--workspace-line, var(--vs-account-line));
}

.bhrigu-transits-themes h3,
.bhrigu-transits-evidence h3 {
  color: var(--vs-account-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.bhrigu-transits-themes > p,
.bhrigu-transits-evidence-grid p,
.bhrigu-transits-details p,
.bhrigu-transits-details li {
  color: var(--vs-account-ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.52;
}

.bhrigu-transits-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--workspace-line, var(--vs-account-line));
  border-radius: 7px;
}

.bhrigu-transits-evidence-grid > div {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 10px;
  gap: 4px;
}

.bhrigu-transits-evidence-grid > div + div {
  border-left: 1px solid var(--workspace-line, var(--vs-account-line));
}

.bhrigu-transits-evidence-grid strong {
  font-size: 14px;
  font-weight: 500;
}

.bhrigu-transits-evidence-grid b {
  font-weight: 500;
}

.bhrigu-transits-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 7px 12px;
  color: var(--vs-account-ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.bhrigu-transits-details > summary::-webkit-details-marker {
  display: none;
}

.bhrigu-transits-details[open] > summary span {
  transform: rotate(180deg);
}

.bhrigu-transits-details > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 12px 14px;
}

.bhrigu-transits-details section {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 5px;
}

.bhrigu-transits-details h4 {
  font-size: 13px;
  font-weight: 600;
}

.bhrigu-transits-previous {
  grid-column: 1 / -1;
}

.bhrigu-transits-previous ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  gap: 4px 12px;
  list-style: none;
}

.bhrigu-transits-previous li {
  display: flex;
  justify-content: space-between;
  min-width: 0;
  gap: 8px;
}

.bhrigu-transits-previous li strong {
  font-weight: 500;
}

.bhrigu-transits-previous li span {
  color: var(--vs-account-muted);
  font-variant-numeric: tabular-nums;
}

.bhrigu-transits-unavailable {
  gap: 10px;
}

.bhrigu-transits-unavailable > div[role="status"] {
  display: grid;
  gap: 5px;
  padding: 16px 12px;
}

.bhrigu-transits-unavailable > div[role="status"] strong {
  font-size: 14px;
  font-weight: 600;
}

.bhrigu-transits-unavailable > div[role="status"] p {
  color: var(--vs-account-muted);
  font-size: 13px;
  font-weight: 400;
}

@media (max-width: 760px) {
  .bhrigu-widget-title {
    gap: 6px;
  }

  .bhrigu-widget-title span {
    font-size: 11px;
  }

  .bhrigu-transits-widget {
    padding: 10px;
  }

  .bhrigu-transits-metric {
    padding: 7px 8px 10px;
  }

  .bhrigu-transits-metric > div > strong {
    font-size: 26px;
  }

  .bhrigu-transits-metric > div > span,
  .bhrigu-transits-metric > p,
  .bhrigu-transits-period time,
  .bhrigu-transits-themes > p,
  .bhrigu-transits-evidence-grid p,
  .bhrigu-transits-details p,
  .bhrigu-transits-details li {
    font-size: 12.5px;
  }

  .bhrigu-transits-desktop-nav {
    display: none;
  }

  .bhrigu-transits-period {
    flex-wrap: wrap;
    padding-inline: 8px;
  }

  .bhrigu-transits-current {
    order: 3;
    width: 100%;
    min-height: 44px;
    margin-left: 0;
  }

  .bhrigu-transits-mobile-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
    gap: 8px;
    border-bottom: 1px solid var(--workspace-line, var(--vs-account-line));
  }

  .bhrigu-transits-mobile-nav button {
    width: 100%;
  }

  .bhrigu-transits-themes,
  .bhrigu-transits-evidence {
    padding-inline: 8px;
  }

  .bhrigu-transits-evidence-grid,
  .bhrigu-transits-details > div,
  .bhrigu-transits-previous ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .bhrigu-transits-evidence-grid > div + div {
    border-top: 1px solid var(--workspace-line, var(--vs-account-line));
    border-left: 0;
  }

  .bhrigu-transits-details > div {
    padding-inline: 8px;
  }

  .bhrigu-transits-previous {
    grid-column: auto;
  }

  .bhrigu-transits-previous li {
    display: grid;
    gap: 1px;
  }
}

/* Compact workspace chrome -------------------------------------------------
   The workspace header, tabs and unit controls share one quiet surface.
   Calculation and chart geometry rules remain untouched. */
:root {
  --workspace-header-surface: var(--workspace-surface);
  --workspace-widget-header-height: 36px;
  --workspace-chart-toolbar-height: 0px;
}

.workspace-page {
  gap: 0;
}

.workspace-compact-header[data-active-chart-header] {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 2px 4px;
  border: 0;
  background: var(--workspace-surface);
}

.workspace-active-chart-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.workspace-active-chart-summary > strong,
.workspace-active-chart-summary .workspace-context {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-chart-edit-icon {
  display: inline-grid;
  flex: 0 0 29px;
  place-items: center;
  width: 29px;
  min-width: 29px;
  height: 29px;
  min-height: 29px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--vs-account-muted, var(--ink-soft));
  box-shadow: none;
  cursor: pointer;
}

.workspace-chart-edit-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.workspace-chart-edit-icon:hover,
.workspace-chart-edit-icon:focus-visible {
  border-color: color-mix(in srgb, var(--vs-account-line, var(--line)) 82%, transparent);
  background: color-mix(in srgb, var(--workspace-surface) 88%, var(--vs-account-bg, #f5f2ea));
  color: var(--vs-account-ink, var(--ink));
}

.workspace-chart-edit-icon:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vs-account-gold, #a48142) 62%, transparent);
  outline-offset: 1px;
}

.workspace-sheet-switcher,
.workspace-sheet-bar {
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: end;
  min-height: 38px;
  padding: 0 4px;
  border-bottom: 1px solid var(--vs-account-line, var(--line)) !important;
  background: var(--workspace-surface);
}

.workspace-sheet-tabs {
  align-items: end;
  gap: 2px;
  min-height: 37px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.workspace-sheet-tabs::-webkit-scrollbar {
  display: none;
}

.workspace-sheet-tab {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  min-width: 70px;
  height: 36px;
  margin-bottom: -1px;
  padding: 0 2px 0 0;
  border: 1px solid transparent !important;
  border-bottom: 0 !important;
  border-radius: 5px 5px 0 0 !important;
  background: transparent !important;
  color: var(--vs-account-muted, var(--ink-soft));
  box-shadow: none !important;
  opacity: .76;
}

.workspace-sheet-tabs [role="tab"] {
  min-width: 0;
  height: 35px;
  min-height: 35px;
  padding: 6px 8px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 5px 5px 0 0 !important;
  background: transparent !important;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: none !important;
}

.workspace-sheet-tab:hover,
.workspace-sheet-tab:focus-within {
  background: color-mix(in srgb, var(--workspace-surface) 88%, var(--vs-account-bg, #f5f2ea)) !important;
  color: var(--vs-account-ink, var(--ink));
  opacity: 1;
}

.workspace-sheet-tab.is-active,
.workspace-sheet-tab:has(> [role="tab"][aria-selected="true"]) {
  border-color: var(--vs-account-line, var(--line)) !important;
  background: var(--workspace-surface) !important;
  color: var(--vs-account-ink, var(--ink));
  opacity: 1;
}

.workspace-sheet-tab.is-active::before,
.workspace-sheet-tab:has(> [role="tab"][aria-selected="true"])::before {
  position: absolute;
  z-index: 2;
  top: -1px;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 5px 5px 0 0;
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 72%, var(--vs-account-ink, #1d2927));
  content: "";
}

.workspace-sheet-tab.is-active::after,
.workspace-sheet-tab:has(> [role="tab"][aria-selected="true"])::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -1px;
  left: 0;
  display: block;
  height: 1px;
  background: var(--workspace-surface);
  content: "";
}

.workspace-sheet-tab-close,
.workspace-sheet-tab-settings,
.workspace-sheet-tab-save {
  align-self: center;
  width: 24px;
  min-width: 24px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--vs-account-muted, var(--ink-soft));
  box-shadow: none;
}

.workspace-sheet-tab-save {
  color: var(--vs-account-gold, #a48142);
}

.workspace-sheet-tab-save svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.workspace-sheet-tab-close:hover,
.workspace-sheet-tab-settings:hover,
.workspace-sheet-tab-save:hover {
  background: color-mix(in srgb, var(--workspace-surface) 80%, var(--vs-account-bg, #f5f2ea));
  color: var(--vs-account-ink, var(--ink));
}

.workspace-sheet-add {
  align-self: end;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin-bottom: -1px;
  padding: 0;
  border: 1px solid transparent !important;
  border-bottom: 0 !important;
  border-radius: 5px 5px 0 0 !important;
  background: transparent !important;
  color: var(--vs-account-muted, var(--ink-soft));
  box-shadow: none !important;
  font-size: 1rem;
}

.workspace-sheet-add:hover,
.workspace-sheet-add:focus-visible,
.workspace-sheet-add[aria-expanded="true"] {
  border-color: var(--vs-account-line, var(--line)) !important;
  background: var(--workspace-surface) !important;
  color: var(--vs-account-ink, var(--ink));
}

.workspace-canvas,
#workspace-panel-main.workspace-local-view {
  margin-top: 4px;
  padding: 4px;
}

.workspace-widget,
.workspace-widget-header,
.workspace-widget-body {
  background: var(--workspace-surface) !important;
}

.workspace-widget-header {
  grid-template-columns: 28px minmax(0, 1fr) auto 30px;
  gap: 3px;
  min-height: var(--workspace-widget-header-height) !important;
  height: var(--workspace-widget-header-height) !important;
  padding: 0 4px;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--vs-account-line, var(--line)) 72%, transparent) !important;
  border-radius: 0;
  background: var(--workspace-surface) !important;
}

.workspace-widget-drag-handle,
.workspace-widget-actions button,
.workspace-chart-widget-header button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
}

.workspace-widget-drag-handle {
  cursor: grab;
  touch-action: pan-y;
}

.workspace-widget-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 30px;
}

.workspace-widget-title strong {
  font-size: .74rem;
  font-weight: 680;
}

.workspace-widget-body {
  overscroll-behavior: auto !important;
}

.method-and-source {
  gap: 3px;
}

.workspace-widget-method,
.workspace-widget-source {
  padding: 1px 4px;
  border-radius: 4px;
  font-size: .57rem;
}

.workspace-chart-widget-header {
  position: relative;
  grid-template-columns: 28px minmax(0, 1fr) 30px;
}

.workspace-chart-header-controls {
  --workspace-chart-header-button-reserve: 96px;
  --workspace-chart-header-house-width: min(
    var(--workspace-chart-one-house-width, 77px),
    max(42px, calc(50% - var(--workspace-chart-header-button-reserve)))
  );
  --workspace-chart-header-selector-width: min(
    var(--workspace-chart-two-house-width, 154px),
    calc(var(--workspace-chart-header-house-width) + var(--workspace-chart-header-house-width))
  );
  position: absolute;
  z-index: 1;
  inset: 0 0 0 -4px;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 0 34px 0 calc(
    50%
    - var(--workspace-chart-two-house-width, 154px)
    + var(--workspace-chart-header-selector-width)
    + 3px
  );
  overflow: hidden;
  pointer-events: none;
}

.workspace-chart-widget-header:has(.workspace-chart-transit-settings:not([hidden])) .workspace-chart-header-controls {
  --workspace-chart-header-button-reserve: 127px;
}

.workspace-chart-widget-header:has(.workspace-chart-rings-toggle[hidden]):not(:has(.workspace-chart-transit-settings:not([hidden]))) .workspace-chart-header-controls {
  --workspace-chart-header-button-reserve: 65px;
}

.workspace-chart-widget-header:has(.workspace-chart-rings-toggle[hidden]):has(.workspace-chart-transit-settings:not([hidden])) .workspace-chart-header-controls {
  --workspace-chart-header-button-reserve: 96px;
}

.workspace-chart-varga-control {
  position: absolute;
  top: 50%;
  left: calc(50% - var(--workspace-chart-two-house-width, 154px));
  width: var(--workspace-chart-header-selector-width);
  min-width: 0;
  transform: translateY(-50%);
  pointer-events: auto;
}

.workspace-chart-header-controls > button {
  pointer-events: auto;
}

.workspace-chart-widget-header > .workspace-widget-drag-handle,
.workspace-chart-widget-header > .workspace-widget-actions {
  position: relative;
  z-index: 2;
}

.workspace-chart-widget-header > .workspace-widget-drag-handle {
  grid-column: 1;
}

.workspace-chart-widget-header > .workspace-widget-actions {
  grid-column: 3;
}

.workspace-chart-varga-control select,
.period-widget-header-controls select,
.period-widget-settings-menu select,
.karakas-widget-compact-control select {
  width: 100%;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  padding: 0 22px 0 7px;
  border: 1px solid color-mix(in srgb, var(--vs-account-line, var(--line)) 82%, transparent);
  border-radius: 4px;
  background-color: var(--workspace-surface);
  color: var(--vs-account-ink, var(--ink));
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
}

.workspace-chart-style-toggle,
.workspace-chart-fullscreen {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--vs-account-line, var(--line)) 82%, transparent);
  border-radius: 4px;
}

.workspace-chart-style-toggle[aria-pressed="true"],
.workspace-chart-rings-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--vs-account-accent, var(--teal)) 58%, var(--vs-account-line, var(--line)));
  background: color-mix(in srgb, var(--vs-account-accent, var(--teal)) 10%, var(--workspace-surface));
  color: var(--vs-account-ink, var(--ink));
}

.workspace-chart-style-toggle svg,
.workspace-chart-fullscreen svg,
.workspace-chart-rings-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.workspace-chart-style-toggle .workspace-chart-style-shape {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 190ms cubic-bezier(.2, .75, .25, 1);
}

.workspace-chart-style-toggle[data-chart-style="south"] .workspace-chart-style-shape {
  transform: rotate(45deg);
}

.workspace-chart-style-toggle[data-chart-style="north"] .workspace-chart-style-shape {
  transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .workspace-chart-style-toggle .workspace-chart-style-shape {
    transition: none;
  }
}

.workspace-chart-rings-toggle[hidden] {
  display: none !important;
}

.workspace-widget.is-workspace-widget-fullscreen .workspace-chart-fullscreen {
  display: none;
}

.workspace-chart-widget-header.is-unavailable select:disabled,
.workspace-chart-widget-header.is-unavailable button:disabled {
  cursor: not-allowed;
  opacity: .46;
}

.workspace-widget-chart .chart-panel {
  grid-template-rows: minmax(0, 1fr) !important;
}

.workspace-widget-chart .chart-toolbar {
  display: none !important;
}

.workspace-widget-chart .workspace-widget-body {
  box-sizing: border-box;
  padding: 0;
  overscroll-behavior: auto !important;
}

.workspace-widget-chart .chart-stage :is(svg, canvas) {
  display: block;
  margin: 0;
}

.periods-panel .workspace-widget-header {
  grid-template-columns: 28px minmax(0, 1fr) 30px;
}

.periods-panel .workspace-widget-title {
  display: none;
}

.period-widget-header-controls {
  display: grid;
  grid-column: 2;
  grid-template-columns: minmax(86px, 1fr) minmax(86px, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.period-widget-header-controls.has-secondary-control {
  grid-template-columns: minmax(76px, 1fr) minmax(76px, 1fr) minmax(72px, .82fr);
}

.period-widget-header-controls.has-secondary-control.has-reference-control {
  grid-template-columns: minmax(86px, 1fr) minmax(86px, 1fr) 88px;
}

.period-widget-source-control,
.period-widget-system-control,
.period-widget-secondary-control {
  display: block;
  min-width: 0;
}

.period-widget-mobile-summary {
  display: none;
}

.period-widget-settings-menu {
  gap: 10px;
}

.period-widget-settings-menu-heading {
  display: grid;
  gap: 2px;
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--vs-account-line);
}

.period-widget-settings-menu-heading span,
.period-widget-settings-menu > label > span,
.period-widget-settings-source > span,
.period-widget-settings-secondary > span,
.period-widget-settings-depth > span {
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .7rem;
  font-weight: 700;
}

.period-widget-settings-menu > label,
.period-widget-settings-source,
.period-widget-settings-secondary,
.period-widget-settings-depth {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.period-widget-settings-menu select {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding-inline: 10px 28px;
  border: 1px solid var(--vs-account-line-strong);
  border-radius: 8px;
  background: var(--workspace-surface);
  color: var(--vs-account-ink, var(--ink));
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
}

.period-widget-settings-menu .period-widget-depth-control {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.period-widget-settings-menu .period-widget-depth-control button {
  width: 100%;
  min-width: 0;
  height: 42px;
}

.period-widget-depth-control {
  display: grid;
  grid-template-columns: repeat(4, 28px);
  gap: 2px;
  min-width: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.period-widget-depth-control button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--vs-account-line, var(--line)) 82%, transparent);
  border-radius: 4px;
  background: var(--workspace-surface);
  color: var(--vs-account-muted, var(--ink-soft));
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.period-widget-depth-control button:hover,
.period-widget-depth-control button:focus-visible {
  border-color: color-mix(in srgb, var(--vs-account-accent, var(--teal)) 48%, var(--vs-account-line, var(--line)));
  color: var(--vs-account-ink, var(--ink));
}

.period-widget-depth-control button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vs-account-accent, var(--teal)) 56%, transparent);
  outline-offset: 1px;
}

.period-widget-depth-control button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--vs-account-accent, var(--teal)) 68%, var(--vs-account-line, var(--line)));
  background: color-mix(in srgb, var(--vs-account-accent, var(--teal)) 12%, var(--workspace-surface));
  color: var(--vs-account-ink, var(--ink));
}

.period-widget-depth-control button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

@container periods (max-width: 520px) {
  .period-widget-header-controls,
  .period-widget-header-controls.has-secondary-control {
    grid-template-columns: minmax(76px, 1fr) minmax(76px, 1fr);
  }

  .period-widget-header-controls.has-secondary-control.has-reference-control {
    grid-template-columns: minmax(76px, 1fr) minmax(76px, 1fr) 84px;
  }

  .period-widget-header-controls > .period-widget-depth-control {
    display: none;
  }

  .period-widget-header-controls.has-reference-control > .period-widget-reference-control {
    display: block;
  }
}

.periods-panel .workspace-widget-actions {
  grid-column: 3;
}

.period-list,
.bhrigu-compact,
.bhrigu-timeline-scroll,
.yoga-view-scroll,
.planet-table-wrap,
.ashtakavarga-table-wrap {
  overscroll-behavior-x: auto !important;
  overscroll-behavior-y: auto !important;
}

/* Keep the Yogas list as the vertical scroll owner. The workspace body has
   several generic overflow rules later in the cascade, so both axes are
   declared explicitly here. This also preserves native trackpad/touch
   scrolling without a wheel listener or preventDefault. */
.yogas-widget > .workspace-widget-body,
.yogas-widget .yogas-view {
  min-height: 0;
  overflow: hidden !important;
}

.yogas-widget .yoga-view-scroll {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color:
    color-mix(in srgb, var(--vs-account-muted, var(--ink-soft)) 44%, transparent)
    transparent;
}

.workspace-row > .workspace-widget[data-widget-type="yogas"] {
  grid-template-rows: var(--workspace-widget-header-height) minmax(0, 1fr) !important;
}

.yoga-widget-filter-menu {
  width: min(320px, calc(100vw - 24px));
  padding: 4px;
}

.yoga-widget-filter-menu > label {
  display: grid;
  grid-template-columns: minmax(88px, .7fr) minmax(132px, 1.3fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 5px 8px;
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .69rem;
  font-weight: 700;
}

.yoga-widget-filter-menu :is(select, input) {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--vs-account-line, var(--line));
  border-radius: 6px;
  background: var(--workspace-surface);
  color: var(--vs-account-ink, var(--ink));
  font: inherit;
}

.yoga-widget-filter-methodology {
  display: block;
  margin: 4px 8px 7px;
  color: var(--vs-account-teal, var(--teal));
  font-size: .69rem;
  font-weight: 750;
  text-decoration: none;
}

.yogas-widget .yoga-view-scroll::-webkit-scrollbar {
  width: 7px;
}

.yogas-widget .yoga-view-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    color-mix(in srgb, var(--vs-account-muted, var(--ink-soft)) 44%, transparent)
    padding-box;
}

.workspace-new-row-drop-zone {
  display: none;
  place-items: center;
  min-height: 36px;
  margin: 0 0 var(--workspace-grid-gap);
  border: 1px dashed color-mix(in srgb, var(--vs-account-line, var(--line)) 78%, transparent);
  border-radius: 3px;
  background: transparent;
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .65rem;
  font-weight: 700;
  pointer-events: auto;
}

body.is-workspace-pointer-dragging .workspace-new-row-drop-zone {
  display: grid;
}

.workspace-new-row-drop-zone.is-drop-target {
  border-color: var(--vs-account-gold, #a48142);
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 8%, transparent);
  color: var(--vs-account-ink, var(--ink));
}

.yogas-widget .workspace-widget-header {
  grid-template-columns: 28px auto minmax(0, 1fr) 30px !important;
  grid-template-rows: 36px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 4px !important;
  overflow: hidden !important;
}

.yogas-widget .workspace-widget-drag-handle {
  grid-column: 1;
  grid-row: 1;
}

.yogas-widget .workspace-widget-title {
  grid-column: 2;
  grid-row: 1;
}

.yogas-widget .yoga-widget-header-meta,
.yogas-widget .workspace-widget-header .yoga-widget-header-meta {
  display: flex;
  grid-column: 3;
  grid-row: 1;
  gap: 2px;
  padding: 0;
  overflow: hidden;
}

.yogas-widget .workspace-widget-actions {
  grid-column: 4;
  grid-row: 1;
}

.yoga-widget-header-control.workspace-widget-source,
.yoga-widget-header-control.yoga-widget-varga,
.yoga-widget-header-control.workspace-widget-method {
  width: 64px;
  max-width: 64px;
}

.yoga-widget-header-control select {
  height: 27px;
  min-height: 27px;
  padding: 0 17px 0 4px;
  font-size: .56rem;
}

.yoga-widget-count {
  min-width: 20px;
  padding: 2px 3px;
}

.yoga-widget-methodology-link,
.yoga-widget-methodology-unavailable {
  max-width: 24px;
  overflow: hidden;
  color: transparent;
}

.workspace-widget.karakas-widget,
.workspace-widget.karakas-widget > .workspace-widget-header.karakas-widget-header {
  grid-template-rows: 36px !important;
}

.workspace-widget.karakas-widget > .workspace-widget-header.karakas-widget-header {
  grid-template-columns: 28px minmax(0, 1fr) auto 30px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 4px !important;
  overflow: hidden !important;
}

.karakas-widget-header > .workspace-widget-drag-handle,
.karakas-widget-header > .karakas-widget-heading,
.karakas-widget-header > .method-and-source,
.karakas-widget-header > .workspace-widget-actions {
  grid-row: 1 !important;
}

.karakas-widget-header > .method-and-source {
  grid-column: 3 !important;
}

.karakas-widget-header > .workspace-widget-actions {
  grid-column: 4 !important;
}

.karakas-widget-compact-control {
  width: 76px;
}

/* Stable workspace drag states. The source stays in the grid as the ghost
   placeholder; only the detached preview follows the pointer. Transform is
   intentionally transitioned only while JS runs FLIP or settles a drop. */
.workspace-widget.is-dragging-source,
.workspace-widget.is-drag-preview-source,
.workspace-widget.is-dragging {
  visibility: visible !important;
  z-index: auto;
  display: grid !important;
  opacity: .18;
  outline: 1px dashed color-mix(in srgb, var(--vs-account-gold, #a48142) 64%, var(--vs-account-line, var(--line)));
  outline-offset: -1px;
  border-color: transparent;
  box-shadow: none;
  cursor: grabbing;
  pointer-events: none;
  transform: none !important;
}

.workspace-drag-preview,
.workspace-widget-drag-ghost {
  position: fixed;
  inset: auto;
  z-index: 1000;
  display: grid;
  place-items: center;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--vs-account-gold, #a48142) 72%, var(--vs-account-line, var(--line)));
  border-radius: var(--workspace-widget-radius, 3px);
  background: var(--workspace-surface, var(--vs-account-surface, #fffdfa));
  color: var(--vs-account-ink, var(--ink));
  box-shadow: 0 14px 32px rgba(25, 30, 28, .16);
  opacity: .94;
  cursor: grabbing;
  transform: translate3d(var(--workspace-drag-x, 0), var(--workspace-drag-y, 0), 0) scale(1.01);
  transform-origin: top left;
  transition: none !important;
  will-change: transform;
}

.workspace-widget-drag-ghost {
  padding: 10px;
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
}

.workspace-drop-placeholder,
.workspace-widget-drop-placeholder,
.workspace-row-drop-placeholder {
  position: relative;
  grid-column: span var(--widget-span-x, var(--workspace-span, 1));
  grid-row: span var(--widget-span-y, 1);
  min-width: 0;
  min-height: var(--workspace-unit-height, 220px);
  visibility: visible;
  border: 1px dashed color-mix(in srgb, var(--vs-account-gold, #a48142) 68%, var(--vs-account-line, var(--line)));
  border-radius: var(--workspace-widget-radius, 3px);
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 7%, transparent);
  pointer-events: none;
}

/* The legacy placeholder sets this custom property inline; keep that exact
   mapping while the pointer controller migrates to the shared class. */
.workspace-widget-drop-placeholder {
  grid-column: span var(--workspace-span, 1);
}

.workspace-drop-placeholder::before,
.workspace-widget-drop-placeholder::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -2px;
  width: 3px;
  border-radius: 3px;
  background: var(--vs-account-gold, #a48142);
  content: "";
}

.workspace-widget.is-drop-target {
  outline: 2px solid color-mix(in srgb, var(--vs-account-gold, #a48142) 76%, var(--vs-account-ink, var(--ink)));
  outline-offset: -2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-account-gold, #a48142) 22%, transparent);
}

.workspace-widget.is-invalid-target {
  outline: 1px dashed color-mix(in srgb, #8e5d51 48%, var(--vs-account-muted, var(--ink-soft)));
  outline-offset: -1px;
  box-shadow: none;
  cursor: no-drop;
}

.workspace-row.is-active-drop-row,
.workspace-row.is-drop-target {
  outline: 1px solid color-mix(in srgb, var(--vs-account-gold, #a48142) 42%, transparent);
  outline-offset: 1px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-account-gold, #a48142) 7%, transparent);
}

.workspace-insertion-marker {
  position: absolute;
  z-index: 24;
  width: var(--workspace-insertion-width, 3px);
  height: var(--workspace-insertion-height, 100%);
  min-width: 3px;
  min-height: 3px;
  border-radius: 999px;
  background: var(--vs-account-gold, #a48142);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-account-gold, #a48142) 14%, transparent);
  opacity: .9;
  pointer-events: none;
}

.workspace-widget.is-flip-animating,
.workspace-widget.is-settling,
.workspace-widget.settled {
  transition-property: transform;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .workspace-widget.is-flip-animating,
  .workspace-widget.is-settling,
  .workspace-widget.settled {
    transition-duration: 1ms;
  }
}

body.is-workspace-pointer-dragging {
  cursor: grabbing;
  user-select: none;
}

body.is-workspace-pointer-dragging .workspace-grid,
body.is-workspace-pointer-dragging .workspace-row-shell {
  overflow-anchor: none;
}

body.is-workspace-pointer-dragging .workspace-widget-drag-handle {
  cursor: grabbing;
  touch-action: none;
}

@media (max-width: 760px) {
  .workspace-compact-header[data-active-chart-header] {
    display: block;
    min-height: 48px;
    padding: 3px 4px;
  }

  .workspace-active-chart-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 29px;
    gap: 1px 5px;
  }

  .workspace-active-chart-summary > strong {
    grid-column: 1 / -1;
  }

  .workspace-active-chart-summary .workspace-context {
    grid-column: 1;
  }

  .workspace-chart-edit-icon {
    grid-column: 2;
    grid-row: 2;
  }

  .workspace-sheet-switcher,
  .workspace-sheet-bar {
    grid-template-columns: minmax(0, 1fr) 36px;
    min-height: 38px;
    padding: 0;
  }

  .workspace-sheet-mobile-trigger,
  .workspace-sheet-add {
    height: 36px;
    min-height: 36px;
    margin-bottom: -1px;
    border: 1px solid var(--vs-account-line, var(--line)) !important;
    border-bottom: 0 !important;
    border-radius: 5px 5px 0 0 !important;
    background: var(--workspace-surface) !important;
  }

  .workspace-widget:not(.yogas-widget) .workspace-widget-header,
  .workspace-chart-widget-header {
    grid-template-rows: 36px !important;
    min-height: 36px !important;
    height: 36px !important;
  }

  .workspace-chart-header-controls {
    gap: 2px;
  }

  .workspace-chart-varga-control {
    min-width: 0;
  }

  .yogas-widget .workspace-widget-title {
    display: none;
  }

  .yogas-widget .workspace-widget-header {
    grid-template-columns: 28px minmax(0, 1fr) 30px !important;
  }

  .yogas-widget .yoga-widget-header-meta,
  .yogas-widget .workspace-widget-header .yoga-widget-header-meta {
    grid-column: 2;
  }

  .yogas-widget .workspace-widget-actions {
    grid-column: 3;
  }

  .yoga-widget-header-control.workspace-widget-source,
  .yoga-widget-header-control.yoga-widget-varga,
  .yoga-widget-header-control.workspace-widget-method {
    width: min(29%, 72px);
    max-width: 72px;
  }

  .workspace-widget.karakas-widget > .workspace-widget-header.karakas-widget-header {
    grid-template-columns: 28px minmax(0, 1fr) auto 30px !important;
  }
}

/* Workspace edit lock ------------------------------------------------------
   Layout affordances are intentionally opt-in. The workspace root owns the
   state so widget content remains fully interactive while layout is locked. */
.workspace-compact-header[data-active-chart-header] {
  gap: 8px;
}

.workspace-compact-header[data-active-chart-header] > .workspace-active-chart-summary {
  flex: 1 1 auto;
}

.workspace-edit-mode-toggle,
[data-workspace-edit-toggle] {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 58px;
  min-width: 58px;
  min-height: 30px;
  margin-inline-start: auto;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--vs-account-line, var(--line)) 86%, transparent);
  border-radius: 999px;
  background: var(--workspace-surface, var(--vs-account-surface, #fffdfa));
  color: var(--vs-account-muted, var(--ink-soft));
  box-shadow: none;
  cursor: pointer;
}

.workspace-edit-mode-toggle:hover,
.workspace-edit-mode-toggle:focus-visible,
[data-workspace-edit-toggle]:hover,
[data-workspace-edit-toggle]:focus-visible {
  border-color: color-mix(in srgb, var(--vs-account-gold, #a48142) 48%, var(--vs-account-line, var(--line)));
  color: var(--vs-account-ink, var(--ink));
}

.workspace-edit-mode-toggle:focus-visible,
[data-workspace-edit-toggle]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vs-account-gold, #a48142) 56%, transparent);
  outline-offset: 1px;
}

.workspace-edit-mode-lock {
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}

.workspace-edit-mode-lock svg,
.workspace-edit-mode-toggle > svg,
[data-workspace-edit-toggle] > svg {
  display: block;
  width: 14px;
  height: 14px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.workspace-edit-mode-lock-shackle {
  transform-box: view-box;
  transform-origin: 16px 10px;
  transition: transform 180ms cubic-bezier(.2, .75, .25, 1);
}

.workspace-edit-mode-toggle[aria-checked="false"] .workspace-edit-mode-lock,
[data-workspace-edit-toggle][aria-checked="false"] .workspace-edit-mode-lock {
  color: var(--vs-account-gold, #a48142);
}

.workspace-edit-mode-toggle[aria-checked="false"] .workspace-edit-mode-lock-shackle,
[data-workspace-edit-toggle][aria-checked="false"] .workspace-edit-mode-lock-shackle {
  transform: rotate(25deg);
}

.workspace-edit-mode-toggle[aria-checked="true"] .workspace-edit-mode-lock-shackle,
[data-workspace-edit-toggle][aria-checked="true"] .workspace-edit-mode-lock-shackle {
  transform: rotate(0deg);
}

.workspace-edit-mode-switch-track {
  position: relative;
  display: block;
  flex: 0 0 30px;
  width: 30px;
  height: 19px;
  border: 1px solid color-mix(in srgb, var(--vs-account-muted, var(--ink-soft)) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--vs-account-bg, #f5f2ea) 84%, var(--workspace-surface, #fffdfa));
  transition: border-color 180ms ease, background-color 180ms ease;
}

.workspace-edit-mode-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 50%;
  background: var(--workspace-surface, var(--vs-account-surface, #fffdfa));
  color: var(--vs-account-muted, var(--ink-soft));
  box-shadow: 0 1px 2px rgba(24, 34, 32, .18);
  transform: translateX(0);
  transition: transform 180ms cubic-bezier(.2, .75, .25, 1), background-color 180ms ease;
}

.workspace-edit-mode-toggle[aria-checked="true"],
[data-workspace-edit-toggle][aria-checked="true"] {
  border-color: color-mix(in srgb, var(--vs-account-gold, #a48142) 58%, var(--vs-account-line, var(--line)));
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 8%, var(--workspace-surface, #fffdfa));
  color: var(--vs-account-ink, var(--ink));
}

.workspace-edit-mode-toggle[aria-checked="true"] .workspace-edit-mode-switch-track,
[data-workspace-edit-toggle][aria-checked="true"] .workspace-edit-mode-switch-track {
  border-color: color-mix(in srgb, var(--vs-account-gold, #a48142) 72%, var(--vs-account-line, var(--line)));
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 30%, var(--workspace-surface, #fffdfa));
}

.workspace-edit-mode-toggle[aria-checked="true"] .workspace-edit-mode-switch-thumb,
[data-workspace-edit-toggle][aria-checked="true"] .workspace-edit-mode-switch-thumb {
  border-color: color-mix(in srgb, var(--vs-account-gold, #a48142) 62%, transparent);
  background: var(--workspace-surface, var(--vs-account-surface, #fffdfa));
  color: var(--vs-account-gold, #a48142);
  transform: translateX(13px);
}

/* Locked is the default, including the first paint before JS restores state. */
.workspace-page:not(.is-workspace-editing) :is(
  .workspace-widget-inserter,
  .workspace-row-end-inserter,
  .workspace-row-inserter,
  .workspace-new-row-drop-zone,
  .workspace-widget-drop-placeholder,
  .workspace-row-drop-placeholder,
  .workspace-widget-drag-ghost,
  .workspace-widget-drag-handle,
  [data-widget-menu],
  [data-add-workspace-widget],
  [data-workspace-edit-control]
) {
  display: none !important;
}

/* A custom sheet may receive content while its layout is locked. The lock
   governs placement, not access to the widget catalogue. */
.workspace-page:not(.is-workspace-editing) :is(
  .custom-sheet-empty-state,
  .custom-sheet-workspace-actions
) [data-add-workspace-widget] {
  display: inline-flex !important;
}

.workspace-page:not(.is-workspace-editing) .workspace-widget-header {
  cursor: default;
}

.workspace-page:not(.is-workspace-editing) .workspace-widget-actions {
  display: none !important;
}

/* Remove the empty first grid track which normally belongs to the handle. */
.workspace-page:not(.is-workspace-editing) .workspace-widget-header:not(.workspace-chart-widget-header):not(.karakas-widget-header) {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.workspace-page:not(.is-workspace-editing) .workspace-widget-header:not(.workspace-chart-widget-header):not(.karakas-widget-header) > .workspace-widget-title {
  grid-column: 1 !important;
}

.workspace-page:not(.is-workspace-editing) .workspace-widget-header:not(.workspace-chart-widget-header):not(.karakas-widget-header) > .method-and-source {
  grid-column: 2 !important;
}

.workspace-page:not(.is-workspace-editing) .workspace-widget-header:not(.workspace-chart-widget-header):not(.karakas-widget-header) > .workspace-widget-actions {
  grid-column: 3 !important;
}

.workspace-page:not(.is-workspace-editing) .workspace-chart-widget-header {
  grid-template-columns: minmax(0, 1fr) !important;
}

.workspace-page:not(.is-workspace-editing) .workspace-chart-widget-header > .workspace-chart-header-controls {
  grid-column: 1 !important;
  padding-right: 3px;
}

.workspace-page:not(.is-workspace-editing) .workspace-chart-widget-header > .workspace-widget-actions {
  display: none !important;
}

.workspace-page.is-workspace-editing .workspace-chart-widget-header .workspace-chart-header-controls {
  --workspace-chart-header-button-reserve: 127px;
  padding-left: calc(
    max(40px, calc(50% - var(--workspace-chart-two-house-width, 154px)))
    + var(--workspace-chart-header-selector-width)
    + 3px
  );
}

.workspace-page.is-workspace-editing .workspace-chart-widget-header .workspace-chart-varga-control {
  left: max(40px, calc(50% - var(--workspace-chart-two-house-width, 154px)));
}

.workspace-page.is-workspace-editing .workspace-chart-widget-header:has(.workspace-chart-transit-settings:not([hidden])) .workspace-chart-header-controls {
  --workspace-chart-header-button-reserve: 158px;
}

.workspace-page.is-workspace-editing .workspace-chart-widget-header:has(.workspace-chart-rings-toggle[hidden]):not(:has(.workspace-chart-transit-settings:not([hidden]))) .workspace-chart-header-controls {
  --workspace-chart-header-button-reserve: 96px;
}

.workspace-page.is-workspace-editing .workspace-chart-widget-header:has(.workspace-chart-rings-toggle[hidden]):has(.workspace-chart-transit-settings:not([hidden])) .workspace-chart-header-controls {
  --workspace-chart-header-button-reserve: 127px;
}

.workspace-page:not(.is-workspace-editing) .periods-panel .workspace-widget-header {
  grid-template-columns: minmax(0, 1fr) !important;
}

.workspace-page:not(.is-workspace-editing) .periods-panel .period-widget-header-controls {
  grid-column: 1 !important;
}

.workspace-page:not(.is-workspace-editing) .periods-panel .workspace-widget-actions {
  grid-column: 2 !important;
}

.workspace-page:not(.is-workspace-editing) .yogas-widget .workspace-widget-header {
  grid-template-columns: auto minmax(0, 1fr) !important;
}

.workspace-page:not(.is-workspace-editing) .yogas-widget .workspace-widget-title {
  grid-column: 1 !important;
}

.workspace-page:not(.is-workspace-editing) .yogas-widget :is(.yoga-widget-header-meta, .workspace-widget-header .yoga-widget-header-meta) {
  grid-column: 2 !important;
}

.workspace-page:not(.is-workspace-editing) .yogas-widget .workspace-widget-actions {
  grid-column: 3 !important;
}

.workspace-page:not(.is-workspace-editing) .karakas-widget-header {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.workspace-page:not(.is-workspace-editing) .karakas-widget-header > .karakas-widget-heading {
  grid-column: 1 !important;
}

.workspace-page:not(.is-workspace-editing) .karakas-widget-header > .method-and-source {
  grid-column: 2 !important;
}

.workspace-page:not(.is-workspace-editing) .karakas-widget-header > .workspace-widget-actions {
  grid-column: 3 !important;
}

/* Edit mode makes every layout affordance deterministic instead of revealing
   unrelated plus buttons opportunistically on hover. */
.workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] .workspace-widget-drag-handle {
  display: grid !important;
  cursor: grab;
}

.workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] .workspace-widget-inserter {
  display: grid !important;
  opacity: .58;
}

.workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] .workspace-widget-inserter-right {
  top: 50%;
  right: -11px;
  bottom: auto;
  left: auto;
  transform: translateY(-50%) scale(.94);
}

.workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] .workspace-widget-inserter-bottom {
  top: auto;
  right: auto;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%) scale(.94);
}

.workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] :is(
  .workspace-widget:hover,
  .workspace-widget:focus-within
) > .workspace-widget-inserter-right,
.workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] .workspace-widget-inserter-right:focus-visible {
  transform: translateY(-50%) scale(1);
}

.workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] :is(
  .workspace-widget:hover,
  .workspace-widget:focus-within
) > .workspace-widget-inserter-bottom,
.workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] .workspace-widget-inserter-bottom:focus-visible {
  transform: translateX(-50%) scale(1);
}

.workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] .workspace-row-end-inserter {
  display: inline-flex !important;
  opacity: .68;
}

.workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] .workspace-row-inserter {
  display: grid !important;
  opacity: .68;
}

.workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] [data-add-workspace-widget] {
  display: inline-flex !important;
}

.workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] :is(
  .workspace-widget-inserter:hover,
  .workspace-widget-inserter:focus-visible,
  .workspace-row-end-inserter:hover,
  .workspace-row-end-inserter:focus-visible,
  .workspace-row-inserter:hover,
  .workspace-row-inserter:focus-visible
) {
  opacity: 1;
}

.workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] .workspace-widget-drag-handle:hover,
.workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] .workspace-widget-drag-handle:focus-visible {
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 9%, transparent);
  color: var(--vs-account-ink, var(--ink));
}

body.is-workspace-editing.is-workspace-pointer-dragging .workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] .workspace-new-row-drop-zone {
  display: grid !important;
}

body.is-workspace-pointer-dragging:not(.is-workspace-editing) {
  cursor: auto;
  user-select: auto;
}

@media (max-width: 760px) {
  .workspace-compact-header[data-active-chart-header] {
    display: flex;
    align-items: center;
  }

  .workspace-compact-header[data-active-chart-header] > .workspace-active-chart-summary {
    min-width: 0;
  }

  .workspace-edit-mode-toggle,
  [data-workspace-edit-toggle] {
    width: 58px;
    min-width: 58px;
    margin-inline-start: 3px;
  }

  .workspace-page:not(.is-workspace-editing) .yogas-widget .workspace-widget-header {
    grid-template-columns: minmax(0, 1fr) 30px !important;
  }

  .workspace-page:not(.is-workspace-editing) .yogas-widget :is(.yoga-widget-header-meta, .workspace-widget-header .yoga-widget-header-meta) {
    grid-column: 1 !important;
  }

  .workspace-page:not(.is-workspace-editing) .yogas-widget .workspace-widget-actions {
    grid-column: 2 !important;
  }

  .workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] .workspace-widget-inserter-bottom {
    display: none !important;
  }

  .workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] .workspace-widget-inserter-right {
    top: 4px;
    right: 36px;
    bottom: auto;
    left: auto;
    opacity: .72;
    transform: none;
  }

  .workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] :is(
    .workspace-widget:hover,
    .workspace-widget:focus-within
  ) > .workspace-widget-inserter-right,
  .workspace-page.is-workspace-editing[data-workspace-edit-mode="true"] .workspace-widget-inserter-right:focus-visible {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-edit-mode-toggle,
  [data-workspace-edit-toggle],
  .workspace-edit-mode-lock-shackle,
  .workspace-edit-mode-switch-track,
  .workspace-edit-mode-switch-thumb {
    transition: none !important;
  }
}

/* Unified chart and worksheet tab bar --------------------------------------
   The active chart identity is the first tab; worksheet tabs, add and the
   edit lock remain on the same level. This is layout-only and deliberately
   does not affect ChartViewer geometry. */
.workspace-unified-tabbar {
  position: sticky;
  z-index: 29;
  top: var(--account-topbar-height, 60px);
}

.workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header] {
  display: grid;
  grid-template-columns: minmax(0, max-content) 38px minmax(58px, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 3px 4px;
  border: 0 !important;
  border-bottom: 1px solid var(--vs-account-line, var(--line)) !important;
  background: var(--vs-account-workspace-bg, var(--workspace-surface, #fffdfa));
}

.workspace-unified-tabbar .workspace-sheet-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 38px;
  overflow-x: auto;
  overflow-y: hidden;
}

.workspace-unified-tabbar .workspace-sheet-tab {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: 84px;
  max-width: 210px;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0 2px 0 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--vs-account-line, var(--line)) 88%, var(--vs-account-ink, #1d2927)) !important;
  border-radius: 6px !important;
  background: var(--workspace-surface, var(--vs-account-surface, #fffdfa)) !important;
  color: var(--vs-account-muted, var(--ink-soft));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--workspace-surface, #fffdfa) 55%, transparent) inset !important;
  opacity: 1;
}

.workspace-unified-tabbar .workspace-sheet-tab > [role="tab"] {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding: 5px 8px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: inherit;
  box-shadow: none !important;
  text-align: left;
}

.workspace-unified-tabbar .workspace-sheet-tab:hover {
  border-color: var(--vs-account-line-strong, var(--vs-account-line, var(--line))) !important;
  background: color-mix(in srgb, var(--workspace-surface, var(--paper)) 98%, var(--vs-account-accent, var(--teal))) !important;
  color: var(--vs-account-ink, var(--ink));
}

.workspace-unified-tabbar .workspace-sheet-tab.is-active,
.workspace-unified-tabbar .workspace-sheet-tab.active,
.workspace-unified-tabbar .workspace-sheet-tab:has(> [role="tab"].is-active),
.workspace-unified-tabbar .workspace-sheet-tab:has(> [role="tab"].active),
.workspace-unified-tabbar .workspace-sheet-tab:has(> [role="tab"][aria-selected="true"]) {
  border-color: color-mix(in srgb, var(--vs-account-accent, var(--teal)) 20%, var(--vs-account-line-strong, var(--line))) !important;
  background: color-mix(in srgb, var(--workspace-surface, var(--paper)) 97%, var(--vs-account-accent, var(--teal))) !important;
  color: var(--vs-account-ink, var(--ink));
  box-shadow: none !important;
}

.workspace-unified-tabbar .workspace-sheet-tab::before,
.workspace-unified-tabbar .workspace-sheet-tab::after {
  display: none !important;
  content: none;
}

.workspace-unified-tabbar .workspace-sheet-tab-primary {
  position: sticky;
  z-index: 4;
  left: 0;
  min-width: clamp(280px, 34vw, 470px);
  max-width: min(470px, 46vw);
  padding-right: 3px;
  border-color: color-mix(in srgb, var(--vs-account-line, var(--line)) 70%, var(--vs-account-ink, #1d2927)) !important;
  background: var(--workspace-surface, var(--vs-account-surface, #fffdfa)) !important;
  box-shadow: 7px 0 12px -10px color-mix(in srgb, var(--vs-account-ink, #1d2927) 42%, transparent) !important;
}

.workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header]:has(
  .workspace-sheet-tabs > .workspace-sheet-tab-primary:only-child
) {
  grid-template-columns: minmax(0, 1fr) 38px minmax(58px, 2fr);
}

.workspace-unified-tabbar .workspace-sheet-tabs > .workspace-sheet-tab-primary:only-child {
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.workspace-unified-tabbar .workspace-sheet-tab-primary > [role="tab"] {
  padding-right: 5px;
}

.workspace-primary-chart-copy {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.workspace-primary-chart-copy [data-current-chart-name] {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 36%;
  overflow: hidden;
  color: var(--vs-account-ink, var(--ink));
  font-size: .76rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-primary-chart-copy .workspace-context[data-current-chart-context] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .68rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-unified-tabbar .workspace-sheet-tab-primary .workspace-chart-edit-icon {
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  margin: 0;
}

.workspace-unified-tabbar .workspace-sheet-tab-primary .workspace-sheet-tab-close {
  display: none !important;
}

.workspace-unified-tabbar .workspace-sheet-add {
  box-sizing: border-box;
  grid-column: 2;
  align-self: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--vs-account-line, var(--line)) 88%, var(--vs-account-ink, #1d2927)) !important;
  border-radius: 6px !important;
  background: var(--workspace-surface, var(--vs-account-surface, #fffdfa)) !important;
}

.workspace-unified-tabbar .workspace-sheet-add:hover,
.workspace-unified-tabbar .workspace-sheet-add:focus-visible,
.workspace-unified-tabbar .workspace-sheet-add[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--vs-account-gold, #a48142) 46%, var(--vs-account-ink, #1d2927)) !important;
  background: color-mix(in srgb, var(--workspace-surface, #fffdfa) 92%, var(--vs-account-gold, #a48142)) !important;
}

.workspace-unified-tabbar .workspace-edit-mode-control {
  display: flex;
  grid-column: 3;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.workspace-unified-tabbar .workspace-edit-mode-toggle,
.workspace-unified-tabbar [data-workspace-edit-toggle] {
  margin-inline-start: 0;
}

@media (max-width: 980px) and (min-width: 761px) {
  .workspace-unified-tabbar .workspace-sheet-tab-primary:not(:only-child) {
    min-width: 240px;
    max-width: 38vw;
  }

  .workspace-primary-chart-copy {
    gap: 5px;
  }

  .workspace-primary-chart-copy [data-current-chart-name] {
    max-width: 38%;
    font-size: .72rem;
  }

  .workspace-primary-chart-copy .workspace-context[data-current-chart-context] {
    font-size: .63rem;
  }
}

@media (max-width: 760px) {
  .workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header] {
    grid-template-columns: minmax(0, 1fr) 36px 58px;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 3px 4px;
  }

  .workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header]:has(
    .workspace-sheet-tabs > .workspace-sheet-tab-primary:only-child
  ) {
    grid-template-columns: minmax(0, 1fr) 36px 58px;
  }

  .workspace-unified-tabbar .workspace-sheet-tabs {
    display: none !important;
  }

  .workspace-unified-tabbar .workspace-sheet-mobile-trigger {
    box-sizing: border-box;
    display: flex;
    grid-column: 1;
    width: 100%;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--vs-account-line, var(--line)) 88%, var(--vs-account-ink, #1d2927)) !important;
    border-radius: 6px !important;
    background: var(--workspace-surface, var(--vs-account-surface, #fffdfa)) !important;
  }

  .workspace-unified-tabbar .workspace-sheet-mobile-trigger:hover,
  .workspace-unified-tabbar .workspace-sheet-mobile-trigger:focus-visible,
  .workspace-unified-tabbar .workspace-sheet-mobile-trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--vs-account-accent, var(--teal)) 52%, var(--vs-account-line, var(--line))) !important;
  }

  .workspace-unified-tabbar .workspace-sheet-add {
    grid-column: 2;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .workspace-unified-tabbar .workspace-edit-mode-control {
    grid-column: 3;
  }

  .workspace-unified-tabbar .workspace-edit-mode-toggle,
  .workspace-unified-tabbar [data-workspace-edit-toggle] {
    width: 58px;
    min-width: 58px;
    min-height: 30px;
    margin: 0;
  }
}

/* Planet positions: compact responsive columns and aligned numeric values. */
.planet-table-panel :is(.planet-table-jaimini-head, .planet-table-jaimini-cell) {
  box-sizing: border-box;
  width: 7%;
  min-width: 0;
  max-width: none;
  padding-inline: 4px;
  text-align: center;
}

.planet-table-panel .planet-table-jaimini-head-inner {
  justify-content: center;
  width: 100%;
  gap: 3px;
}

.planet-table-panel .planet-table-wrap :is([data-planet-table-sort], [data-jaimini-table-toggle]) {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 3px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}

.planet-table-panel .planet-table-wrap [data-planet-table-sort] {
  justify-content: flex-start;
  width: 100%;
  border-width: 0;
}

.planet-table-panel .planet-table-wrap th.planet-table-number [data-planet-table-sort],
.planet-table-panel .planet-table-wrap .planet-table-jaimini-head [data-jaimini-table-toggle] {
  justify-content: center;
}

.planet-table-panel .planet-table-wrap [data-planet-table-sort]:hover {
  background: color-mix(in srgb, var(--vs-account-accent) 6%, transparent);
  color: var(--vs-account-ink);
}

.planet-table-panel .planet-table-wrap [data-jaimini-table-toggle] {
  justify-content: center;
  width: 100%;
  border-color: color-mix(in srgb, var(--vs-account-gold) 24%, var(--vs-account-line));
  background: color-mix(in srgb, var(--vs-account-gold) 7%, transparent);
  color: color-mix(in srgb, var(--vs-account-ink) 86%, var(--vs-account-gold));
}

.planet-table-panel .planet-table-wrap [data-jaimini-table-toggle]:hover {
  border-color: color-mix(in srgb, var(--vs-account-gold) 42%, var(--vs-account-line));
  background: color-mix(in srgb, var(--vs-account-gold) 12%, transparent);
}

.planet-table-panel .planet-table-wrap :is([data-planet-table-sort], [data-jaimini-table-toggle]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vs-account-accent) 72%, transparent);
  outline-offset: 1px;
}

.planet-table-panel .planet-table-wrap th[aria-sort]:not([aria-sort="none"]) [data-planet-table-sort] {
  color: var(--vs-account-ink);
}

.planet-table-panel :is(.planet-table-sort-indicator, .planet-table-sort-mode) {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  min-height: 1.35em;
  padding: 0 2px;
  border: 1px solid color-mix(in srgb, var(--vs-account-accent) 24%, var(--vs-account-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--vs-account-accent) 7%, var(--workspace-surface));
  color: var(--vs-account-accent);
  font-size: .78em;
  font-weight: 850;
  line-height: 1;
}

.planet-table-panel .planet-table-jaimini-cell .jaimini-karaka-token {
  width: min(30px, 100%);
  max-width: 100%;
  min-width: 0;
  min-height: 24px;
  padding: 1px 3px;
  border-radius: 5px;
}

.planet-table-panel .planet-table-number {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.planet-table-panel .planet-table-wrap :is(.planet-table-graha-cell, .planet-table-nakshatra-cell, .planet-table-pada-cell) {
  white-space: normal;
}

.planet-table-nakshatra-value,
.planet-table-pada-value {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  max-width: 100%;
  column-gap: 3px;
  line-height: 1.15;
}

.planet-table-nakshatra-name,
.planet-table-lord {
  min-width: 0;
}

.planet-table-lord {
  color: var(--vs-account-muted);
  font-size: .88em;
  font-weight: 600;
}

@media (max-width: 980px) {
  .planet-table-panel .planet-table-wrap :is(th, td) {
    padding: 7px 4px;
  }

  .planet-table-panel .planet-table-wrap th { font-size: 10px; }
  .planet-table-panel .planet-table-wrap td { font-size: 12px; }

  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(1) { width: 17%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(2) { width: 7%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(3) { width: 13%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(4) { width: 15%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(5) { width: 20%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(6) { width: 8%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(7) { width: 5%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(8) { width: 15%; }
}

@media (max-width: 760px) {
  .planet-table-panel .planet-table-wrap :is(th, td) {
    padding: 5px 2px;
  }

  .planet-table-panel .planet-table-wrap th {
    font-size: 9px;
    line-height: 1.1;
  }

  .planet-table-panel .planet-table-wrap td {
    font-size: 10px;
  }

  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(1) { width: 15%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(2) { width: 7%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(3) { width: 12%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(4) { width: 13%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(5) { width: 18%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(6) { width: 8%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(7) { width: 7%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(8) { width: 20%; }

  .planet-table-panel .planet-table-wrap th:nth-child(8) [data-planet-table-sort] {
    font-size: 8px;
    line-height: 1.1;
  }

  .planet-table-panel .planet-table-jaimini-cell .jaimini-karaka-token {
    min-height: 20px;
    padding-inline: 1px;
    font-size: 9px;
  }

  .planet-table-panel .planet-table-wrap :is([data-planet-table-sort], [data-jaimini-table-toggle]) {
    gap: 2px;
    min-height: 0;
    padding: 0 1px;
  }

  .planet-table-panel :is(.planet-table-sort-indicator, .planet-table-sort-mode) {
    min-width: 1.2em;
    min-height: 1.2em;
    padding-inline: 1px;
    font-size: .72em;
  }
}

@media (max-width: 340px) {
  .planet-table-panel .planet-table-wrap :is(th, td) {
    padding: 4px 1px;
  }

  .planet-table-panel .planet-table-wrap th { font-size: 8px; }
  .planet-table-panel .planet-table-wrap td { font-size: 9px; }

  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(1) { width: 15%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(2) { width: 7%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(3) { width: 13%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(4) { width: 13%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(5) { width: 17%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(6) { width: 8%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(7) { width: 7%; }
  .planet-table-panel .planet-table-wrap :is(th, td):nth-child(8) { width: 20%; }

  .planet-table-panel .planet-table-wrap th:nth-child(8) [data-planet-table-sort] {
    font-size: 7px;
  }

  .planet-table-panel .planet-table-lord {
    font-size: .76em;
  }

  .planet-table-panel .planet-table-jaimini-cell .jaimini-karaka-token {
    font-size: 8px;
  }

  .planet-table-panel .planet-table-wrap :is([data-planet-table-sort], [data-jaimini-table-toggle]) {
    gap: 1px;
    min-height: 0;
    padding-inline: 0;
  }
}

/* Contrast refinement -----------------------------------------------------
   Keep the restrained vedascope palette, but restore visual hierarchy
   between the workspace canvas, unit headers, content and controls. */
.account-app {
  --vs-account-workspace-bg: color-mix(in srgb, var(--mist) 58%, var(--paper));
  --vs-account-bg: var(--mist);
  --vs-account-bg-soft: #f8f5ee;
  --vs-account-surface: var(--paper);
  --vs-account-surface-solid: var(--paper);
  --vs-account-ink: var(--ink);
  --vs-account-muted: var(--ink-soft);
  --vs-account-accent: var(--teal);
  --vs-account-gold: var(--gold);
  --vs-account-line: var(--line);
  --vs-account-line-strong: rgba(20, 32, 30, .22);
  --vs-account-shadow: 0 14px 38px rgba(20, 32, 30, .07);
  --workspace-surface: var(--paper);
  --workspace-header-surface: var(--workspace-surface);
}

.account-topbar {
  background: rgba(16, 24, 25, .88);
}

.account-search input {
  border-color: rgba(247, 242, 231, .3);
  background: rgba(247, 242, 231, .12);
}

.account-search input::placeholder {
  color: rgba(247, 242, 231, .68);
}

.account-icon-button,
.account-profile-button {
  border-color: rgba(247, 242, 231, .32);
  background: rgba(247, 242, 231, .1);
}

.account-runtime-status-copy small {
  color: rgba(247, 242, 231, .7);
}

.account-sidebar {
  border-right-color: var(--vs-account-line);
  background: color-mix(in srgb, var(--paper) 94%, var(--mist));
}

.account-nav-item:hover {
  background: color-mix(in srgb, var(--vs-account-surface) 93%, var(--vs-account-accent));
}

.account-nav-item.active,
.account-nav-item[aria-current="page"] {
  background: color-mix(in srgb, var(--vs-account-surface) 90%, var(--vs-account-accent));
  box-shadow: inset 3px 0 0 var(--vs-account-accent);
}

.account-primary-action,
.account-secondary-action-gold {
  border-color: color-mix(in srgb, var(--vs-account-gold) 56%, var(--vs-account-line));
  background: var(--vs-account-gold);
  color: var(--vs-account-ink);
}

.quick-chart-calculate {
  border-color: var(--vs-account-accent);
  background: var(--vs-account-accent);
  color: var(--ivory);
}

.account-app .workspace-page,
.account-app .workspace-canvas.workspace-local-view,
.account-app #workspace-panel-main.workspace-local-view {
  background: var(--workspace-surface);
}

.account-app .workspace-grid,
.account-app .workspace-rows,
.account-app .workspace-row-shell,
.account-app .workspace-row {
  background: transparent;
}

.account-app .workspace-page .workspace-widget {
  background: var(--workspace-surface) !important;
  box-shadow: inset 0 0 0 1px var(--vs-account-line);
}

.account-app .workspace-page .workspace-widget > .workspace-widget-header {
  border-bottom-color: var(--vs-account-line) !important;
  background: var(--workspace-surface) !important;
}

.account-app .workspace-page .workspace-widget-body,
.account-app .workspace-page .workspace-widget .chart-viewer,
.account-app .workspace-page .workspace-widget .chart-panel {
  background: var(--workspace-surface) !important;
}

.workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header] {
  border-bottom-color: var(--vs-account-line) !important;
  box-shadow: none;
}

.workspace-unified-tabbar .workspace-sheet-tab,
.workspace-unified-tabbar .workspace-sheet-add,
.workspace-unified-tabbar .workspace-sheet-mobile-trigger {
  border-color: var(--vs-account-line-strong) !important;
}

.workspace-unified-tabbar .workspace-sheet-tab.is-active,
.workspace-unified-tabbar .workspace-sheet-tab.active,
.workspace-unified-tabbar .workspace-sheet-tab:has(> [role="tab"][aria-selected="true"]) {
  border-color: color-mix(in srgb, var(--vs-account-accent) 20%, var(--vs-account-line-strong)) !important;
  background: color-mix(in srgb, var(--workspace-surface) 97%, var(--vs-account-accent) 3%) !important;
  box-shadow: none !important;
}

.workspace-chart-varga-control select,
.period-widget-header-controls select,
.karakas-widget-compact-control select,
.workspace-chart-style-toggle,
.workspace-chart-fullscreen,
.workspace-chart-rings-toggle,
.workspace-edit-mode-toggle,
[data-workspace-edit-toggle] {
  border-color: var(--vs-account-line-strong);
}

.account-app th {
  color: color-mix(in srgb, var(--vs-account-ink) 78%, var(--vs-account-accent));
}

.planet-table-panel thead th {
  border-bottom-color: var(--vs-account-line-strong);
  background: color-mix(in srgb, var(--workspace-surface) 95%, var(--vs-account-accent) 5%);
}

.account-app :is(th, td) {
  border-bottom-color: var(--vs-account-line);
}

@media (max-width: 760px) {
  .periods-panel .period-widget-header-controls {
    display: grid !important;
    grid-column: 1 !important;
  }

  .periods-panel .period-widget-mobile-summary {
    display: none !important;
  }

  .workspace-page:not(.is-workspace-editing) .periods-panel .period-widget-mobile-summary {
    grid-column: 1;
  }

  .period-widget-mobile-summary > span {
    min-width: 0;
    overflow: hidden;
    color: var(--vs-account-ink, var(--ink));
    font-size: .82rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .period-widget-mobile-summary > button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid var(--vs-account-line-strong);
    border-radius: 7px;
    background: var(--workspace-surface);
    color: var(--vs-account-accent, var(--teal));
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
  }
}

/* ChartViewer geometry stays untouched; only strokes and labels gain weight. */
.account-app .chart-viewer {
  --paper: #fffefa;
  --ink: #1d1b17;
  --muted: #625b52;
  --line: rgba(33, 29, 24, .3);
  --line-strong: rgba(33, 29, 24, .56);
  --accent: #95622a;
  --accent-soft: rgba(149, 98, 42, .14);
}

.account-app .chart-viewer .north-line {
  stroke: var(--workspace-chart-grid, rgba(33, 29, 24, .48));
}

/* The chart container already provides the same outer frame as the south
   chart. Hide only the duplicate SVG rectangle; keep all inner north lines. */
.account-app .chart-viewer .north-svg > rect.north-line {
  stroke: none;
}

.account-app .chart-viewer .north-chart {
  box-shadow: inset 0 0 0 1px var(--workspace-chart-grid-strong, var(--line));
}

.account-app .chart-viewer .ring-boundary {
  stroke: rgba(33, 29, 24, .34);
}

.account-app .chart-viewer .ring-boundary.nakshatra {
  stroke: rgba(33, 29, 24, .46);
}

.account-app .chart-viewer :is(.ring-label, .sign, .chart-code) {
  color: rgba(29, 27, 23, .7);
  fill: rgba(29, 27, 23, .7);
}

.account-app .chart-viewer :is(.aspect-label, .north-aspect-label) {
  color: rgba(29, 27, 23, .54);
}

.account-app .chart-viewer .ring-label.active {
  fill: rgba(29, 27, 23, .86);
}

.account-app .chart-viewer .house-number,
.account-app .chart-viewer .north-sign-number {
  color: #9e5516;
}

/* Transit chart context ---------------------------------------------------
   The control lives beside the chart selector and opens an anchored editor.
   Transit coordinates remain explicit; the city search only fills the form. */
.workspace-chart-transit-settings,
[data-chart-transit-settings] {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid var(--vs-account-line-strong, rgba(20, 32, 30, .22));
  border-radius: 4px;
  background: color-mix(in srgb, var(--vs-account-accent, #1f5c5a) 8%, var(--workspace-surface, #fffcf5));
  color: var(--vs-account-ink, #14201e);
  cursor: pointer;
}

.workspace-chart-transit-settings:hover,
[data-chart-transit-settings]:hover {
  border-color: color-mix(in srgb, var(--vs-account-accent, #1f5c5a) 68%, var(--vs-account-line-strong, rgba(20, 32, 30, .22)));
  background: color-mix(in srgb, var(--vs-account-accent, #1f5c5a) 14%, var(--workspace-surface, #fffcf5));
}

.workspace-chart-transit-settings:focus-visible,
[data-chart-transit-settings]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vs-account-accent, #1f5c5a) 58%, transparent);
  outline-offset: 1px;
}

.workspace-chart-transit-settings svg,
[data-chart-transit-settings] svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.workspace-chart-transit-settings[hidden],
[data-chart-transit-settings][hidden] {
  display: none !important;
}

.workspace-transit-settings-surface[hidden] {
  display: none !important;
}

.workspace-transit-settings-surface {
  position: fixed;
  z-index: 96;
  inset: 0;
  pointer-events: none;
}

.workspace-transit-settings-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
  pointer-events: auto;
}

.workspace-transit-settings-panel {
  position: fixed;
  top: 84px;
  right: 16px;
  display: flex;
  flex-direction: column;
  width: min(430px, calc(100vw - 24px));
  max-height: min(680px, calc(100dvh - 104px));
  overflow: hidden;
  border: 1px solid var(--vs-account-line-strong, rgba(20, 32, 30, .22));
  border-radius: 8px;
  background: var(--workspace-surface, #fffcf5);
  box-shadow: 0 18px 50px rgba(16, 24, 25, .2), 0 2px 8px rgba(16, 24, 25, .12);
  color: var(--vs-account-ink, #14201e);
  pointer-events: auto;
}

.workspace-transit-settings-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--vs-account-line, rgba(20, 32, 30, .13));
  background: var(--workspace-header-surface, var(--workspace-surface, #fffcf5));
}

.workspace-transit-settings-header > div {
  min-width: 0;
}

.workspace-transit-settings-header span {
  display: block;
  margin-bottom: 2px;
  color: var(--vs-account-muted, #53615e);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.workspace-transit-settings-header h2 {
  margin: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.2;
}

.workspace-transit-settings-close {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--vs-account-line, rgba(20, 32, 30, .13));
  border-radius: 50%;
  background: transparent;
  color: var(--vs-account-muted, #53615e);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.workspace-transit-settings-form {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.workspace-transit-settings-form fieldset,
.workspace-transit-settings-form label {
  min-width: 0;
}

.workspace-transit-settings-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.workspace-transit-settings-section-heading > strong {
  color: var(--vs-account-ink, #14201e);
  font-size: .71rem;
  font-weight: 760;
  line-height: 1.3;
}

.workspace-transit-settings-moment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) auto;
  align-items: end;
  gap: 8px;
}

.workspace-transit-settings-form label {
  display: grid;
  gap: 4px;
}

.workspace-transit-settings-form label > span {
  color: var(--vs-account-muted, #53615e);
  font-size: .68rem;
  font-weight: 680;
  line-height: 1.25;
}

.workspace-transit-settings-form label small {
  font-size: .92em;
  font-weight: 500;
}

.workspace-transit-settings-form input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 9px;
  border: 1px solid var(--vs-account-line-strong, rgba(20, 32, 30, .22));
  border-radius: 5px;
  background: var(--workspace-surface, #fffcf5);
  color: var(--vs-account-ink, #14201e);
  font: inherit;
  font-size: .76rem;
}

.workspace-transit-settings-form input::placeholder {
  color: color-mix(in srgb, var(--vs-account-muted, #53615e) 64%, transparent);
}

.workspace-transit-settings-form input[readonly] {
  background: color-mix(in srgb, var(--workspace-surface, #fffcf5) 90%, var(--vs-account-accent, #1f5c5a));
  color: var(--vs-account-muted, #53615e);
  cursor: default;
}

.workspace-transit-settings-form input:focus-visible,
.workspace-transit-settings-form button:focus-visible,
.workspace-transit-settings-close:focus-visible,
.workspace-transit-location-results button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vs-account-accent, #1f5c5a) 58%, transparent);
  outline-offset: 1px;
}

.workspace-transit-settings-now,
.workspace-transit-settings-actions button {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--vs-account-line-strong, rgba(20, 32, 30, .22));
  border-radius: 5px;
  background: var(--workspace-surface, #fffcf5);
  color: var(--vs-account-ink, #14201e);
  font: inherit;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.workspace-transit-settings-location {
  position: relative;
  display: grid;
  gap: 7px;
}

.workspace-transit-settings-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workspace-transit-location-results {
  display: grid;
  max-height: 176px;
  overflow-y: auto;
  border: 1px solid var(--vs-account-line, rgba(20, 32, 30, .13));
  border-radius: 5px;
  background: var(--workspace-surface, #fffcf5);
  box-shadow: 0 10px 24px rgba(16, 24, 25, .12);
}

.workspace-transit-location-results:empty {
  display: none;
}

.workspace-transit-location-results button,
.workspace-transit-location-results [role="option"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border: 0;
  border-bottom: 1px solid var(--vs-account-line, rgba(20, 32, 30, .13));
  background: transparent;
  color: var(--vs-account-ink, #14201e);
  text-align: left;
  cursor: pointer;
}

.workspace-transit-location-results button:last-child,
.workspace-transit-location-results [role="option"]:last-child {
  border-bottom: 0;
}

.workspace-transit-location-results button:hover,
.workspace-transit-location-results [role="option"]:hover,
.workspace-transit-location-results [aria-selected="true"] {
  background: color-mix(in srgb, var(--vs-account-accent, #1f5c5a) 9%, var(--workspace-surface, #fffcf5));
}

.workspace-transit-location-results :is(strong, span, small) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace-transit-location-results strong {
  font-size: .73rem;
  font-weight: 720;
  white-space: nowrap;
}

.workspace-transit-location-results :is(span, small) {
  color: var(--vs-account-muted, #53615e);
  font-size: .64rem;
}

.workspace-transit-settings-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.workspace-transit-settings-message {
  min-height: 1.2em;
  margin: -3px 0 0;
  color: var(--vs-account-muted, #53615e);
  font-size: .67rem;
  line-height: 1.35;
}

.workspace-transit-settings-message:empty {
  display: none;
}

.workspace-transit-settings-message[data-state="error"] {
  color: var(--vs-account-danger, #9d3f35);
}

.workspace-transit-settings-message[data-state="success"] {
  color: var(--vs-account-success, #2f7454);
}

.workspace-transit-settings-message[data-state="warning"] {
  color: var(--vs-account-gold, #c5944f);
}

.workspace-transit-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 2px;
}

.workspace-transit-settings-actions .workspace-transit-settings-apply {
  border-color: var(--vs-account-accent, #1f5c5a);
  background: var(--vs-account-accent, #1f5c5a);
  color: var(--ivory, #f7f2e7);
}

@media (max-width: 760px) {
  .workspace-row > .workspace-widget {
    grid-column: 1 !important;
  }

  .workspace-transit-settings-surface {
    display: flex;
    align-items: flex-end;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }

  .workspace-transit-settings-backdrop {
    background: rgba(16, 24, 25, .28);
  }

  .workspace-transit-settings-panel {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100%;
    max-height: min(760px, calc(100dvh - 16px - env(safe-area-inset-bottom)));
    border-radius: 10px 10px 6px 6px;
  }

  .workspace-transit-settings-header {
    min-height: 54px;
    padding: 9px 11px;
  }

  .workspace-transit-settings-form {
    gap: 11px;
    padding: 11px;
  }

  .workspace-transit-settings-moment {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
}

@media (max-width: 420px) {
  .workspace-transit-settings-moment {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .workspace-transit-settings-now {
    grid-column: 1 / -1;
    min-height: 32px;
  }

  .workspace-transit-settings-fields {
    gap: 5px;
  }

  .workspace-transit-settings-fields input {
    padding-inline: 6px;
    font-size: .68rem;
  }
}

/* Intermediate-width coherence ------------------------------------------
   The sidebar switches off at 1180px, while the original compact topbar,
   worksheet picker and one-column canvas start at 760px. Keep the space
   between those breakpoints as a deliberate tablet layout instead of
   letting desktop intrinsic widths collide. */
@media (min-width: 761px) and (max-width: 1180px) {
  .account-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding-inline: 14px;
  }

  .account-brand {
    gap: 0;
    overflow: hidden;
  }

  .account-brand img {
    flex: 0 0 118px;
    width: 118px;
  }

  .account-topbar-actions {
    min-width: 0;
    gap: 6px;
  }

  .workspace-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-row > .workspace-widget {
    grid-column: span 1 !important;
  }

  .workspace-row > .workspace-widget[data-widget-span-x="2"],
  .workspace-row > .workspace-widget[data-widget-span-x="3"] {
    grid-column: span 2 !important;
  }

  .workspace-row > .periods-panel:not(.varshaphala-widget-varshaphala-periods),
  .workspace-row > .planet-table-panel,
  .workspace-row > .ashtakavarga-panel,
  .workspace-row > [data-widget-type="periods"],
  .workspace-row > [data-widget-type="planet-table"],
  .workspace-row > [data-widget-type="ashtakavarga"] {
    grid-column: 1 / -1 !important;
  }

  .workspace-row[style]:has(> .workspace-widget-chart) {
    grid-auto-rows: calc(50cqw + var(--workspace-widget-header-height) - 3px);
  }

  .workspace-row[style]:has(> .workspace-widget-chart[data-widget-span-x="2"]),
  .workspace-row[style]:has(> .workspace-widget-chart[data-widget-span-x="3"]) {
    grid-auto-rows: var(--workspace-unit-height);
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .account-runtime-status[data-runtime-presentation="compact"] {
    flex: 0 0 auto;
    padding-inline: 2px;
  }

  .account-runtime-status[data-runtime-presentation="compact"] .account-runtime-status-copy {
    display: none;
  }
}

/* A visible sidebar can make the workspace narrower even when the viewport
   itself is wider than 1180px. The row shell is already a size container, so
   use its real width as the second tablet signal. */
@media (min-width: 1181px) {
  .workspace-row > .workspace-widget[data-widget-span-x="2"] {
    grid-column: span 2 !important;
  }

  .workspace-row > .workspace-widget[data-widget-span-x="3"] {
    grid-column: span 3 !important;
  }
}

@container (min-width: 761px) and (max-width: 1080px) {
  .workspace-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-row > .workspace-widget {
    grid-column: span 1 !important;
  }

  .workspace-row > .workspace-widget[data-widget-span-x="2"],
  .workspace-row > .workspace-widget[data-widget-span-x="3"] {
    grid-column: span 2 !important;
  }

  .workspace-row > .periods-panel:not(.varshaphala-widget-varshaphala-periods),
  .workspace-row > .planet-table-panel,
  .workspace-row > .ashtakavarga-panel,
  .workspace-row > [data-widget-type="periods"],
  .workspace-row > [data-widget-type="planet-table"],
  .workspace-row > [data-widget-type="ashtakavarga"] {
    grid-column: 1 / -1 !important;
  }

  .workspace-row[style]:has(> .workspace-widget-chart) {
    grid-auto-rows: calc(50cqw + var(--workspace-widget-header-height) - 3px);
  }

  .workspace-row[style]:has(> .workspace-widget-chart[data-widget-span-x="2"]),
  .workspace-row[style]:has(> .workspace-widget-chart[data-widget-span-x="3"]) {
    grid-auto-rows: var(--workspace-unit-height);
  }
}

/* Yoga presentation 5.2 ---------------------------------------------------
   The detector remains unchanged. This layer turns its sourced trace into a
   two-level reading: a scannable result list and a complete evidence panel. */
.account-app .yoga-view-category-sticky {
  min-height: 32px;
  padding: 7px 10px;
  background: var(--workspace-inset-surface, var(--vs-account-surface));
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .045em;
}

.account-app .yoga-view-row {
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  height: auto;
  min-height: 76px;
  max-height: none;
  padding: 8px 9px 8px 11px;
  gap: 8px;
}

.account-app .yoga-view-row-copy {
  display: grid;
  align-items: initial;
  gap: 3px;
  white-space: normal;
}

.account-app .yoga-result-heading,
.account-app .yoga-result-meta {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}

.account-app .yoga-result-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--vs-account-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-app .yoga-result-category {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--workspace-line) 78%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--workspace-inset-surface) 76%, transparent);
  color: var(--vs-account-muted);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.45;
}

.account-app .yoga-result-why {
  min-width: 0;
  overflow: hidden;
  color: var(--vs-account-ink);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-app .yoga-result-meta {
  overflow: hidden;
  color: var(--vs-account-muted);
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
}

.account-app .yoga-result-participants {
  display: inline-flex;
  min-width: 0;
  gap: 4px;
  overflow: hidden;
}

.account-app .yoga-participant-token {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 500;
  text-overflow: ellipsis;
}

.account-app .yoga-participant-divider {
  color: var(--vs-account-muted);
}

.account-app .yoga-reference-badge {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--vs-account-muted);
  font-size: 11px;
  font-weight: 400;
  text-overflow: ellipsis;
}

.account-app .yoga-view-row-status {
  grid-column: 2;
  grid-row: 1;
  color: var(--vs-account-muted);
}

.account-app .yoga-inspector--desktop-panel {
  width: min(100%, 480px);
}

.account-app .yoga-inspector-header {
  min-height: 72px;
  padding: 10px 12px;
  background: var(--workspace-inset-surface, var(--vs-account-surface));
}

.account-app .yoga-inspector-header h2,
.account-app .yoga-inspector-header span,
.account-app .yoga-inspector-header small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-app .yoga-inspector-header h2 {
  margin: 2px 0;
  font-size: 17px;
  font-weight: 600;
}

.account-app .yoga-inspector-header span,
.account-app .yoga-inspector-header small {
  color: var(--vs-account-muted);
  font-size: 11.5px;
  font-weight: 400;
}

.account-app .yoga-inspector-scroll {
  padding: 12px;
}

.account-app .yoga-inspector-lead {
  margin: 0 0 10px;
  padding: 10px 11px;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background: var(--workspace-inset-surface, var(--vs-account-surface));
}

.account-app .yoga-inspector-lead p {
  margin: 0;
  color: var(--vs-account-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.account-app .yoga-inspector-section {
  margin-top: 12px;
}

.account-app .yoga-inspector-section h3 {
  margin: 0 0 6px;
  color: var(--vs-account-ink);
  font-size: 13px;
  font-weight: 600;
}

.account-app .yoga-inspector-reasons ul,
.account-app .yoga-inspector-limitations ul {
  display: grid;
  gap: 6px;
}

.account-app .yoga-inspector-reasons li {
  position: relative;
  padding: 8px 9px 8px 29px;
  border: 1px solid color-mix(in srgb, var(--workspace-line) 82%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--workspace-inset-surface) 70%, transparent);
  overflow-wrap: anywhere;
}

.account-app .yoga-inspector-reasons li::before {
  position: absolute;
  top: 8px;
  left: 10px;
  color: var(--vs-account-green, #17695f);
  content: "✓";
  font-weight: 600;
}

.account-app .yoga-inspector-rule p,
.account-app .yoga-inspector-limitations li {
  margin: 0;
  color: var(--vs-account-muted);
  overflow-wrap: anywhere;
}

.account-app .yoga-inspector-participants li {
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  padding: 6px 0;
}

.account-app .yoga-inspector-participants span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.account-app .yoga-inspector-meaning dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.account-app .yoga-inspector-meaning dl > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--workspace-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--workspace-inset-surface) 62%, transparent);
}

.account-app .yoga-inspector-meaning dt {
  margin-bottom: 3px;
  color: var(--vs-account-muted);
  font-size: 11px;
  font-weight: 500;
}

.account-app .yoga-inspector-meaning dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.account-app .yoga-source-list {
  display: grid;
  gap: 6px;
}

.account-app .yoga-methodology-link {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px 9px;
  text-decoration: none;
}

.account-app .yoga-methodology-link strong {
  font-size: 12.5px;
  font-weight: 500;
}

.account-app .yoga-methodology-link span {
  color: var(--vs-account-muted);
  font-size: 11.5px;
  font-weight: 400;
}

.account-app .yoga-technical-details {
  margin-top: 14px;
}

@media (max-width: 760px) {
  .account-app .yoga-view-row {
    min-height: 78px;
  }

  .account-app .yoga-result-meta {
    gap: 5px;
  }

  .account-app .yoga-reference-badge {
    display: none;
  }

  .account-app .yoga-inspector-header h2,
  .account-app .yoga-inspector-header span,
  .account-app .yoga-inspector-header small {
    white-space: normal;
  }

  .account-app .yoga-inspector-meaning dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  .account-app .yoga-result-category {
    display: none;
  }

  .account-app .yoga-inspector-participants li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Varshaphala uses the same widgets at every viewport. The first desktop row
   keeps annual D1, natal D1 and Mudda periods side by side; narrow layouts
   stack the exact same component instances in that DOM order. */
@media (min-width: 1181px) {
  .workspace-row[data-workspace-row="varsha-row-1"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workspace-row[data-workspace-row="varsha-row-1"] > .varshaphala-widget-varshaphala-periods {
    grid-column: span 1 !important;
  }

  .workspace-row[data-workspace-row="varsha-row-2"] > [data-widget-id="varsha-planets"],
  .workspace-row[data-workspace-row="varsha-row-3"] > [data-widget-id="varsha-strength"] {
    grid-column: span 2 !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .workspace-row[data-workspace-row="varsha-row-1"] > .varshaphala-widget-varshaphala-periods {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 761px) and (max-width: 1440px) {
  .workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header] {
    grid-template-columns: minmax(0, 1fr) 36px minmax(58px, 68px);
    gap: 4px;
  }

  .workspace-unified-tabbar .workspace-sheet-tabs {
    gap: 3px;
    overflow-x: hidden;
  }

  .workspace-unified-tabbar .workspace-sheet-tab {
    flex: 1 1 0;
    min-width: 64px;
    max-width: none;
  }

  .workspace-unified-tabbar .workspace-sheet-tab-primary {
    position: relative;
    left: auto;
    flex: 0 1 240px;
    width: auto;
    min-width: 190px;
    max-width: 240px;
    box-shadow: none !important;
  }

  .workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header]:has(
    .workspace-sheet-tabs > .workspace-sheet-tab-primary:only-child
  ) {
    grid-template-columns: minmax(0, 1fr) 36px minmax(58px, 1fr);
  }

  .workspace-unified-tabbar .workspace-sheet-tabs > .workspace-sheet-tab-primary:only-child {
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .workspace-unified-tabbar .workspace-sheet-tab > [role="tab"] {
    padding-inline: 6px;
  }

  .workspace-unified-tabbar .workspace-sheet-add {
    width: 36px;
    min-width: 36px;
  }
}

@media (min-width: 761px) {
  .planet-table-panel .planet-table-wrap th {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
}

/* Saved chart picker -----------------------------------------------------
   The primary workspace tab is the chart binding control. The picker lives
   outside the horizontally clipped tab strip and becomes a bottom sheet on
   narrow screens. */
.workspace-primary-chart-chevron {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin-left: 2px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 160ms ease;
}

.workspace-sheet-tab-primary [data-open-workspace-chart-picker][aria-expanded="true"] .workspace-primary-chart-chevron {
  transform: rotate(180deg);
}

.workspace-chart-picker[hidden] {
  display: none !important;
}

.workspace-chart-picker {
  position: fixed;
  z-index: 180;
  inset: 0;
}

.workspace-chart-picker-backdrop {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--vs-account-ink, #182725) 7%, transparent);
  cursor: default;
}

.workspace-chart-picker-panel {
  position: fixed;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  max-width: calc(100vw - 16px);
  max-height: min(620px, calc(100dvh - 92px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--vs-account-line-strong, var(--line)) 80%, var(--vs-account-ink, #182725));
  border-radius: 10px;
  background: var(--workspace-surface, var(--vs-account-surface, #fffdfa));
  color: var(--vs-account-ink, var(--ink));
  box-shadow: 0 18px 48px color-mix(in srgb, var(--vs-account-ink, #182725) 18%, transparent), 0 2px 8px color-mix(in srgb, var(--vs-account-ink, #182725) 10%, transparent);
}

.workspace-chart-picker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 18px 12px;
}

.workspace-chart-picker-header > div {
  display: grid;
  gap: 2px;
}

.workspace-chart-picker-header span {
  color: var(--vs-account-accent, var(--teal));
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.workspace-chart-picker-header h2 {
  margin: 0;
  font-family: var(--vs-account-serif, Georgia, serif);
  font-size: 1.36rem;
  font-weight: 600;
  line-height: 1.14;
}

.workspace-chart-picker-close {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: -3px -4px 0 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: 1.35rem;
  line-height: 1;
}

.workspace-chart-picker-close:hover,
.workspace-chart-picker-close:focus-visible {
  border-color: var(--vs-account-line-strong, var(--line));
  background: color-mix(in srgb, var(--workspace-surface, #fffdfa) 90%, var(--vs-account-accent, var(--teal)));
  color: var(--vs-account-ink, var(--ink));
}

.workspace-chart-picker-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0 18px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--vs-account-line-strong, var(--line)) 84%, var(--vs-account-ink, #182725));
  border-radius: 7px;
  background: color-mix(in srgb, var(--workspace-surface, #fffdfa) 94%, var(--vs-account-page-bg, #eef2ec));
}

.workspace-chart-picker-search:focus-within {
  border-color: color-mix(in srgb, var(--vs-account-accent, var(--teal)) 68%, var(--vs-account-line, var(--line)));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vs-account-accent, var(--teal)) 12%, transparent);
}

.workspace-chart-picker-search svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--vs-account-muted, var(--ink-soft));
  stroke-linecap: round;
  stroke-width: 1.7;
}

.workspace-chart-picker-search input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--vs-account-ink, var(--ink));
  font: inherit;
  font-size: .86rem;
}

.workspace-chart-picker-search input::placeholder {
  color: color-mix(in srgb, var(--vs-account-muted, var(--ink-soft)) 78%, transparent);
}

.workspace-chart-picker-hint,
.workspace-chart-picker-message {
  margin: 8px 18px 0;
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .7rem;
  line-height: 1.35;
}

.workspace-chart-picker-message {
  padding: 8px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--workspace-surface, #fffdfa) 91%, var(--vs-account-gold, #b98135));
  color: var(--vs-account-ink, var(--ink));
}

.workspace-chart-picker-message[data-state="error"] {
  background: color-mix(in srgb, var(--workspace-surface, #fffdfa) 88%, #b0483c);
  color: color-mix(in srgb, var(--vs-account-ink, #182725) 78%, #8e2f27);
}

.workspace-chart-picker-results {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 118px;
  max-height: 330px;
  margin-top: 10px;
  padding: 4px 8px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--vs-account-line, var(--line));
  border-bottom: 1px solid var(--vs-account-line, var(--line));
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--vs-account-muted, #66716e) 38%, transparent) transparent;
}

.workspace-chart-picker-option {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--vs-account-ink, var(--ink));
  text-align: left;
}

.workspace-chart-picker-option:hover,
.workspace-chart-picker-option:focus-visible {
  border-color: color-mix(in srgb, var(--vs-account-accent, var(--teal)) 28%, var(--vs-account-line, var(--line)));
  background: color-mix(in srgb, var(--workspace-surface, #fffdfa) 92%, var(--vs-account-accent, var(--teal)));
  outline: none;
}

.workspace-chart-picker-option.is-selected {
  background: color-mix(in srgb, var(--workspace-surface, #fffdfa) 88%, var(--vs-account-accent, var(--teal)));
}

.workspace-chart-picker-option-marker {
  width: 9px;
  height: 9px;
  border: 1px solid color-mix(in srgb, var(--vs-account-muted, var(--ink-soft)) 70%, transparent);
  border-radius: 50%;
  background: transparent;
}

.workspace-chart-picker-option.is-selected .workspace-chart-picker-option-marker {
  border-color: var(--vs-account-accent, var(--teal));
  background: var(--vs-account-accent, var(--teal));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-account-accent, var(--teal)) 14%, transparent);
}

.workspace-chart-picker-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.workspace-chart-picker-option-copy strong,
.workspace-chart-picker-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-chart-picker-option-copy strong {
  font-size: .83rem;
  font-weight: 800;
}

.workspace-chart-picker-option-copy small {
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .68rem;
  font-weight: 550;
}

.workspace-chart-picker-option-folder,
.workspace-chart-picker-option-current {
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .6rem;
  font-weight: 700;
  white-space: nowrap;
}

.workspace-chart-picker-option-folder {
  border: 1px solid var(--vs-account-line, var(--line));
}

.workspace-chart-picker-option-current {
  background: color-mix(in srgb, var(--workspace-surface, #fffdfa) 78%, var(--vs-account-accent, var(--teal)));
  color: var(--vs-account-accent, var(--teal));
}

.workspace-chart-picker-empty {
  display: grid;
  place-content: center;
  gap: 3px;
  min-height: 126px;
  padding: 20px;
  color: var(--vs-account-muted, var(--ink-soft));
  text-align: center;
}

.workspace-chart-picker-empty strong {
  color: var(--vs-account-ink, var(--ink));
  font-size: .82rem;
}

.workspace-chart-picker-empty span {
  font-size: .7rem;
}

.workspace-chart-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 8px 14px 9px 18px;
}

.workspace-chart-picker-footer > span {
  color: var(--vs-account-muted, var(--ink-soft));
  font-size: .68rem;
  font-weight: 700;
}

.workspace-chart-picker-footer button {
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb, var(--vs-account-gold, #b98135) 58%, var(--vs-account-line, var(--line)));
  border-radius: 999px;
  background: color-mix(in srgb, var(--workspace-surface, #fffdfa) 91%, var(--vs-account-gold, #b98135));
  color: var(--vs-account-ink, var(--ink));
  font-size: .72rem;
  font-weight: 800;
}

.workspace-chart-picker-footer button:hover,
.workspace-chart-picker-footer button:focus-visible {
  background: color-mix(in srgb, var(--workspace-surface, #fffdfa) 83%, var(--vs-account-gold, #b98135));
}

.workspace-sheet-mobile-chart {
  display: none;
}

@media (max-width: 760px) {
  .workspace-chart-picker-backdrop {
    background: color-mix(in srgb, var(--vs-account-ink, #182725) 34%, transparent);
  }

  .workspace-chart-picker-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    max-height: min(82dvh, 690px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 16px 16px 0 0;
  }

  .workspace-chart-picker-header {
    padding: 18px 16px 12px;
  }

  .workspace-chart-picker-search,
  .workspace-chart-picker-hint,
  .workspace-chart-picker-message {
    margin-right: 16px;
    margin-left: 16px;
  }

  .workspace-chart-picker-results {
    max-height: none;
  }

  .workspace-chart-picker-option {
    grid-template-columns: 12px minmax(0, 1fr) auto;
    min-height: 58px;
  }

  .workspace-chart-picker-option-folder {
    display: none;
  }

  .workspace-sheet-mobile-chart {
    display: block;
    padding: 0 0 9px;
    border-bottom: 1px solid var(--vs-account-line, var(--line));
  }

  .workspace-sheet-mobile-chart > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 6px;
  }

  .workspace-sheet-mobile-chart button {
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--vs-account-line-strong, var(--line));
    border-radius: 7px;
    background: var(--workspace-surface, var(--vs-account-surface, #fffdfa));
    color: var(--vs-account-ink, var(--ink));
  }

  .workspace-sheet-mobile-chart button[data-open-workspace-chart-picker] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    text-align: left;
  }

  .workspace-sheet-mobile-chart button[data-open-workspace-chart-picker] > span {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  .workspace-sheet-mobile-chart strong,
  .workspace-sheet-mobile-chart small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-sheet-mobile-chart strong {
    font-size: .75rem;
  }

  .workspace-sheet-mobile-chart small {
    color: var(--vs-account-muted, var(--ink-soft));
    font-size: .61rem;
  }

  .workspace-sheet-mobile-chart svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
  }

  .workspace-sheet-mobile-chart button[data-edit-active-chart] {
    display: grid;
    place-items: center;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-primary-chart-chevron {
    transition: none;
  }
}

/* Today v2: local Panchanga, personal context and shared ChartViewer. */
.today-page {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow-x: clip;
}

.today-dashboard {
  box-sizing: border-box;
  width: 100%;
  max-width: 1480px;
  min-width: 0;
  margin-inline: auto;
  padding: clamp(16px, 2.2vw, 32px);
  color: var(--vs-account-ink, #13211e);
}

.today-dashboard > section,
.today-dashboard-primary > section,
.today-personal > article,
.today-personal > section {
  min-width: 0;
}

.today-dashboard-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, auto);
  align-items: end;
  gap: 18px;
  margin: 0 0 16px;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid color-mix(in srgb, var(--vs-account-deep-green, #145b52) 20%, var(--vs-account-line));
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--vs-account-gold, #c99241) 12%, transparent), transparent 34%),
    color-mix(in srgb, var(--vs-account-surface, #fffdf8) 92%, var(--vs-account-pale-green, #eaf1ec));
}

.today-dashboard-title {
  display: grid;
  gap: 7px;
}

.today-dashboard-kicker,
.today-section-eyebrow {
  color: var(--vs-account-deep-green, #16655d);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.today-dashboard-header h1 {
  margin: 0;
  font-family: var(--vs-account-serif, Georgia, serif);
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: 540;
  line-height: .98;
  letter-spacing: -.025em;
}

.today-location-trigger {
  display: flex;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  padding: 7px 10px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--vs-account-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--vs-account-surface, #fffdf8) 75%, transparent);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.today-location-trigger span {
  overflow: hidden;
  font-size: .9rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-location-trigger small {
  color: var(--vs-account-muted, #596963);
  font-size: .73rem;
  white-space: nowrap;
}

.today-current-status {
  display: grid;
  min-width: min(300px, 100%);
  padding: 13px 15px;
  gap: 3px;
  border-left: 3px solid var(--vs-account-gold, #c99241);
  border-radius: 8px;
  background: color-mix(in srgb, var(--vs-account-deep-green, #145b52) 7%, transparent);
}

.today-current-status strong {
  font-size: .9rem;
  line-height: 1.3;
}

.today-current-status span,
.today-current-status small {
  color: var(--vs-account-muted, #596963);
  font-size: .74rem;
  line-height: 1.35;
}

.today-location-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% - 10px);
  left: 24px;
  display: grid;
  width: min(520px, calc(100% - 48px));
  padding: 14px;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--vs-account-deep-green, #145b52) 30%, var(--vs-account-line));
  border-radius: 12px;
  background: var(--vs-account-surface, #fffdf8);
  box-shadow: 0 18px 45px rgb(22 39 34 / 16%);
}

.today-location-panel[hidden] {
  display: none;
}

.today-location-panel > label {
  color: var(--vs-account-muted, #596963);
  font-size: .75rem;
  font-weight: 700;
}

.today-location-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 6px;
}

.today-location-search-row input,
.today-location-search-row button {
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--vs-account-line);
  border-radius: 8px;
  background: var(--vs-account-surface, #fffdf8);
  color: inherit;
}

.today-location-search-row input {
  padding-inline: 12px;
  font: inherit;
}

.today-location-search-row button {
  padding: 0;
  cursor: pointer;
  font-size: 1.35rem;
}

.today-location-results {
  position: static;
  width: 100%;
  max-height: min(330px, 48vh);
  overflow: auto;
  box-shadow: none;
}

.today-dashboard-primary {
  display: grid;
  grid-template-columns: minmax(460px, 1.12fr) minmax(330px, .88fr);
  align-items: stretch;
  gap: 12px;
  margin: 0 0 12px;
}

.today-dashboard-primary > .today-transit,
.today-dashboard-primary > .today-personal {
  height: 100%;
}

.today-dashboard-primary > .today-personal {
  align-content: start;
}

.today-dashboard-primary > .today-personal > .today-tara {
  height: auto;
  align-content: start;
  grid-auto-rows: max-content;
}

.today-dashboard-periods {
  margin-bottom: 12px;
}

.today-personal > .today-dashboard-periods {
  margin: 4px 0 0;
  border: 0;
  border-top: 1px solid rgb(18 101 94 / 18%);
  border-radius: 0;
  background: transparent;
}

.today-personal > .today-dashboard-periods > header {
  padding-inline: 0;
}

.today-personal > .today-dashboard-periods .today-dasha-row summary,
.today-personal > .today-dashboard-periods .today-dasha-row.is-unavailable {
  padding-inline: 0;
}

.today-tara .today-status-label {
  width: fit-content;
  min-height: 30px;
  align-self: start;
}

.today-personal,
.today-transit,
.today-panchanga,
.today-timeline,
.today-recommendations {
  min-width: 0;
  padding: clamp(13px, 1.5vw, 18px);
  border: 1px solid var(--vs-account-line);
  border-radius: 14px;
  background: var(--vs-account-surface, #fffdf8);
}

.today-personal {
  display: grid;
  gap: 10px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--vs-account-pale-green, #eaf1ec) 68%, var(--vs-account-surface, #fffdf8)), var(--vs-account-surface, #fffdf8) 64%);
}

.today-personal > header,
.today-transit > header,
.today-panchanga > header,
.today-timeline > header,
.today-recommendations > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.today-personal h2,
.today-transit h2,
.today-panchanga h2,
.today-timeline h2,
.today-recommendations h2 {
  margin: 2px 0 0;
  font-family: var(--vs-account-serif, Georgia, serif);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 570;
  line-height: 1.1;
}

.today-tara {
  display: grid;
  padding: clamp(15px, 2vw, 22px);
  gap: 13px;
  border: 1px solid color-mix(in srgb, var(--vs-account-deep-green, #145b52) 23%, var(--vs-account-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--vs-account-surface, #fffdf8) 88%, var(--vs-account-pale-green, #eaf1ec));
}

.today-tara[data-tara-status="caution"],
.today-tara[data-tara-status="strong_caution"] {
  border-color: color-mix(in srgb, var(--vs-account-gold, #c99241) 45%, var(--vs-account-line));
}

.today-tara > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.today-tara h3 {
  margin: 3px 0 0;
  font-family: var(--vs-account-serif, Georgia, serif);
  font-size: clamp(1.55rem, 2.7vw, 2.15rem);
  font-weight: 560;
  line-height: 1.06;
}

.today-status-label {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--vs-account-deep-green, #145b52) 28%, transparent);
  border-radius: 999px;
  color: var(--vs-account-deep-green, #145b52);
  font-size: .75rem;
  font-weight: 700;
}

.today-tara-description {
  max-width: 62ch;
  margin: 0;
  color: var(--vs-account-muted, #52635d);
  font-size: .91rem;
  line-height: 1.52;
}

.today-tara-actions {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px;
}

.today-tara-actions strong,
.today-tara-actions li {
  font-size: .85rem;
  line-height: 1.38;
}

.today-tara-actions ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 4px;
  list-style: none;
}

.today-tara-actions li::before {
  content: "✓";
  margin-right: 7px;
  color: var(--vs-account-deep-green, #145b52);
  font-weight: 800;
}

.today-tara-caution li::before {
  content: "—";
  color: var(--vs-account-gold, #a86f25);
}

.today-tara-period {
  display: grid;
  padding-top: 10px;
  gap: 3px;
  border-top: 1px solid var(--vs-account-line);
  font-size: .84rem;
  font-weight: 670;
}

.today-tara-period span + span {
  color: var(--vs-account-muted, #596963);
  font-weight: 560;
}

.today-details {
  font-size: .84rem;
}

.today-details summary,
.today-dasha-row summary,
.today-panchanga-item summary {
  cursor: pointer;
  list-style: none;
}

.today-details summary::-webkit-details-marker,
.today-dasha-row summary::-webkit-details-marker,
.today-panchanga-item summary::-webkit-details-marker {
  display: none;
}

.today-details summary {
  width: fit-content;
  min-height: 44px;
  padding: 12px 0;
  color: var(--vs-account-deep-green, #145b52);
  font-weight: 730;
}

.today-details dl,
.today-dasha-row dl {
  display: grid;
  margin: 4px 0 0;
  gap: 6px;
}

.today-details dl > div,
.today-dasha-row dl > div {
  display: grid;
  grid-template-columns: minmax(115px, .8fr) minmax(0, 1.2fr);
  gap: 8px;
}

.today-details dt,
.today-dasha-row dt {
  color: var(--vs-account-muted, #596963);
}

.today-details dd,
.today-dasha-row dd {
  margin: 0;
}

.today-personal-empty {
  min-height: 190px;
  align-content: center;
}

.today-personal-empty h3,
.today-personal-empty p {
  margin: 0;
}

.today-personal-empty select,
.today-dashas select {
  min-width: 0;
  min-height: 44px;
  padding: 6px 28px 6px 9px;
  border: 1px solid var(--vs-account-line);
  border-radius: 7px;
  background: var(--vs-account-surface, #fffdf8);
  color: inherit;
}

.today-add-profile {
  width: fit-content;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid var(--vs-account-deep-green, #145b52);
  border-radius: 8px;
  background: var(--vs-account-deep-green, #145b52);
  color: #fffdf8;
  cursor: pointer;
  font: inherit;
  font-size: .84rem;
  font-weight: 720;
}

.today-dashas {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--vs-account-line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--vs-account-surface, #fffdf8) 92%, transparent);
}

.today-dashas > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 42%);
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--vs-account-line);
}

.today-dashas h3 {
  margin: 0;
  font-size: .9rem;
}

.today-dasha-row {
  margin: 0;
  border-bottom: 1px solid var(--vs-account-line);
}

.today-dasha-row:last-child {
  border-bottom: 0;
}

.today-dasha-row summary,
.today-dasha-row.is-unavailable {
  display: grid;
  grid-template-columns: minmax(110px, .85fr) minmax(130px, 1.15fr) auto;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  gap: 8px;
}

.today-dasha-row summary:hover {
  background: color-mix(in srgb, var(--vs-account-deep-green, #145b52) 5%, transparent);
}

.today-dasha-row strong {
  font-size: .82rem;
}

.today-dasha-row span,
.today-dasha-row time {
  font-size: .8rem;
}

.today-dasha-row time,
.today-dasha-row.is-unavailable span {
  color: var(--vs-account-muted, #596963);
  text-align: right;
}

.today-dasha-row dl {
  padding: 0 12px 12px;
}

.today-compact-empty,
.today-inline-error {
  margin: 0;
  padding: 14px;
  color: var(--vs-account-muted, #596963);
  font-size: .8rem;
}

.today-inline-error {
  border: 1px solid color-mix(in srgb, #b34a3c 24%, var(--vs-account-line));
  border-radius: 9px;
}

.today-transit {
  padding-bottom: 10px;
}

.today-chart-controls {
  display: flex;
  flex-wrap: wrap;
  margin: 12px 0 8px;
  gap: 6px;
}

.today-chart-controls > div,
.today-segmented {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--vs-account-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--vs-account-pale-green, #eaf1ec) 52%, transparent);
}

.today-chart-controls button,
.today-segmented button {
  min-height: 44px;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--vs-account-muted, #596963);
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  font-weight: 680;
  white-space: nowrap;
}

.today-chart-controls button[aria-pressed="true"],
.today-segmented button[aria-pressed="true"] {
  background: var(--vs-account-surface, #fffdf8);
  box-shadow: 0 1px 4px rgb(18 36 31 / 10%);
  color: var(--vs-account-deep-green, #145b52);
}

.today-transit-slot {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
}

.today-transit-chart,
.today-transit-chart .chart-panel,
.today-transit-chart .chart-fit-container {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.today-transit-chart .chart-toolbar {
  display: none;
}

.today-transit-chart .chart-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.today-transit-chart .chart-fit-container {
  grid-row: 1;
}

.today-panchanga,
.today-timeline,
.today-recommendations {
  margin-top: 12px;
}

.today-panchanga-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 12px;
  gap: 7px;
}

.today-panchanga-item {
  min-width: 0;
  border: 1px solid var(--vs-account-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--vs-account-surface, #fffdf8) 90%, var(--vs-account-pale-green, #eaf1ec));
}

.today-panchanga-item summary {
  display: grid;
  min-height: 112px;
  padding: 12px;
  align-content: start;
  gap: 6px;
}

.today-panchanga-item summary > span {
  color: var(--vs-account-deep-green, #145b52);
  font-size: .74rem;
  font-weight: 760;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.today-panchanga-item summary > strong {
  overflow-wrap: anywhere;
  font-family: var(--vs-account-serif, Georgia, serif);
  font-size: 1.04rem;
  font-weight: 570;
  line-height: 1.18;
}

.today-panchanga-item summary > small,
.today-panchanga-item summary > time,
.today-panchanga-item > p {
  color: var(--vs-account-muted, #596963);
  font-size: .78rem;
  line-height: 1.35;
}

.today-panchanga-item > p {
  margin: 0;
  padding: 0 12px 12px;
}

.today-timeline-list {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(118px, 1fr);
  margin: 16px 0 0;
  padding: 18px 0 0;
  gap: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.today-timeline-list::before {
  position: absolute;
  top: 5px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--vs-account-line);
  content: "";
}

.today-timeline-list li {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0 10px 8px;
  gap: 4px;
}

.today-timeline-list li::before {
  position: absolute;
  top: -17px;
  left: 11px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--vs-account-surface, #fffdf8);
  border-radius: 50%;
  background: var(--vs-account-muted, #596963);
  box-shadow: 0 0 0 1px var(--vs-account-line);
  content: "";
}

.today-timeline-list li[data-importance="primary"]::before {
  background: var(--vs-account-deep-green, #145b52);
}

.today-timeline-list li[data-importance="positive"]::before {
  background: #367c5d;
}

.today-timeline-list li[data-importance="caution"]::before {
  background: var(--vs-account-gold, #c99241);
}

.today-timeline-list time {
  font-size: .8rem;
  font-weight: 760;
  white-space: nowrap;
}

.today-timeline-list span {
  color: var(--vs-account-muted, #596963);
  font-size: .78rem;
  line-height: 1.3;
}

.today-recommendations-summary {
  max-width: 72ch;
  margin: 12px 0 0;
  color: var(--vs-account-muted, #596963);
  font-size: .85rem;
  line-height: 1.48;
}

.today-recommendation-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(170px, .55fr);
  margin-top: 14px;
  gap: 10px;
}

.today-recommendation-columns > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--vs-account-line);
  border-radius: 10px;
}

.today-recommendation-columns h3 {
  margin: 0 0 8px;
  font-size: .82rem;
}

.today-recommendation-columns ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 7px;
  list-style: none;
}

.today-recommendation-columns li {
  display: grid;
  gap: 2px;
  font-size: .82rem;
  line-height: 1.38;
}

.today-recommendation-columns li::before {
  content: "•";
  float: left;
  margin-right: 6px;
  color: var(--vs-account-deep-green, #145b52);
}

.today-recommendation-columns li small {
  color: var(--vs-account-muted, #596963);
  font-size: .67rem;
}

.today-best-window {
  align-content: center;
  background: color-mix(in srgb, var(--vs-account-gold, #c99241) 9%, transparent);
}

.today-best-window span,
.today-best-window strong {
  display: block;
}

.today-best-window span {
  color: var(--vs-account-muted, #596963);
  font-size: .78rem;
}

.today-best-window strong {
  margin-top: 6px;
  font-size: 1rem;
}

.today-skeleton {
  overflow: hidden;
}

.today-skeleton > span,
.today-skeleton.today-panchanga-grid > span {
  display: block;
  min-height: 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgb(25 61 52 / 5%), rgb(25 61 52 / 11%), rgb(25 61 52 / 5%));
  background-size: 220% 100%;
  animation: today-skeleton-shimmer 1.35s ease-in-out infinite;
}

.today-skeleton > span:nth-child(2) {
  width: 72%;
}

.today-skeleton.today-panchanga-grid > span {
  width: auto;
  min-height: 112px;
}

@keyframes today-skeleton-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.today-dashboard :where(button, input, select, summary):focus-visible {
  outline: 2px solid var(--vs-account-deep-green, #145b52);
  outline-offset: 2px;
}

@media (max-width: 1120px) {
  .today-dashboard-primary {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-transit {
    width: min(100%, 760px);
    justify-self: center;
  }

  .today-panchanga-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .today-dashboard {
    padding: 10px 10px 90px;
  }

  .today-dashboard-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: 15px;
  }

  .today-current-status {
    min-width: 0;
  }

  .today-location-panel {
    top: calc(100% - 8px);
    left: 8px;
    width: calc(100% - 16px);
  }

  .today-dashboard-primary {
    gap: 10px;
  }

  .today-personal,
  .today-transit,
  .today-panchanga,
  .today-timeline,
  .today-recommendations {
    padding: 12px;
    border-radius: 12px;
  }

  .today-transit {
    width: 100%;
    max-width: 100%;
  }

  .today-tara {
    padding: 14px;
  }

  .today-tara > header {
    display: grid;
  }

  .today-status-label {
    width: fit-content;
  }

  .today-tara-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .today-dashas > header {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-dasha-row summary,
  .today-dasha-row.is-unavailable {
    grid-template-columns: minmax(96px, .8fr) minmax(0, 1.2fr);
  }

  .today-dasha-row time {
    grid-column: 2;
    text-align: left;
  }

  .today-chart-controls {
    display: grid;
  }

  .today-chart-controls > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .today-chart-controls button {
    padding-inline: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .today-panchanga-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-panchanga-item summary {
    min-height: 0;
  }

  .today-timeline > header {
    display: grid;
  }

  .today-segmented {
    width: 100%;
  }

  .today-segmented button {
    flex: 1 1 50%;
  }

  .today-recommendation-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-details dl > div,
  .today-dasha-row dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .today-skeleton > span,
  .today-skeleton.today-panchanga-grid > span {
    animation: none;
  }
}

/* Today dashboard v3 — continuation of the public vedascope visual language. */
.today-dashboard {
  --today-ink: #102822;
  --today-green: #12655e;
  --today-gold: #cf9847;
  --today-paper: #fffdf8;
  color: var(--today-ink);
  background:
    radial-gradient(circle at 88% 4%, rgb(207 152 71 / 11%), transparent 26rem),
    linear-gradient(145deg, #edf4ef 0, #f8f6ed 45%, #fffaf1 100%);
}

.today-dashboard-header {
  min-height: 190px;
  padding: 16px 20px;
  grid-template-columns: minmax(0, 1.3fr) minmax(210px, .7fr);
  align-items: center;
  overflow: visible;
  border-color: rgb(18 101 94 / 18%);
  background: linear-gradient(120deg, rgb(255 253 248 / 96%), rgb(238 245 239 / 93%));
  box-shadow: 0 18px 50px rgb(21 59 49 / 8%);
}

.today-dashboard-title {
  max-width: 760px;
  gap: 4px;
}

.today-dashboard-title h1 {
  margin: 2px 0 6px;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1;
}

.today-dashboard-kicker {
  color: var(--today-gold);
  letter-spacing: .13em;
}

.today-hero-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 12px;
  font-size: 1.05rem;
  line-height: 1.3;
}

.today-hero-facts strong {
  color: var(--today-green);
  font-size: 1.18rem;
}

.today-hero-facts span:last-child {
  font-size: 1rem;
  font-weight: 650;
}

.today-next-change {
  margin: 3px 0 0;
  color: var(--vs-account-muted);
  font-size: .82rem;
}

.today-location-trigger {
  min-height: 38px;
  margin-top: 7px;
}

.today-orbit {
  position: relative;
  display: grid;
  width: 164px;
  height: 164px;
  place-items: center;
  justify-self: center;
}

.today-orbit-path {
  position: absolute;
  inset: 15px;
  border: 1px solid rgb(18 101 94 / 23%);
  border-radius: 50%;
}

.today-orbit-path::before,
.today-orbit-path::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgb(18 101 94 / 11%);
  content: "";
  transform: translate(-50%, -50%);
}

.today-orbit-path::before { width: 1px; height: 118%; }
.today-orbit-path::after { width: 118%; height: 1px; }

.today-orbit-sun {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f7d894, var(--today-gold));
  box-shadow: 0 0 0 10px rgb(207 152 71 / 10%);
}

.today-orbit-moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border: 1px solid rgb(16 40 34 / 20%);
  border-radius: 50%;
  background: linear-gradient(90deg, #f8f3e8 var(--moon-light), #53645f var(--moon-light));
  box-shadow: 0 4px 12px rgb(16 40 34 / 16%);
  transform: translate(-50%, -50%) rotate(var(--moon-angle)) translateX(66px) rotate(calc(-1 * var(--moon-angle)));
  transition: transform .5s ease;
}

.today-orbit > div {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  padding: 5px 8px;
  border: 1px solid rgb(18 101 94 / 15%);
  border-radius: 8px;
  background: rgb(255 253 248 / 86%);
  text-align: right;
}

.today-orbit > div strong { font-size: .85rem; }
.today-orbit > div small { color: var(--vs-account-muted); font-size: .67rem; }

.today-personal,
.today-transit,
.today-panchanga,
.today-day-points,
.today-recommendations {
  min-width: 0;
  padding: clamp(14px, 1.5vw, 20px);
  border: 1px solid rgb(18 101 94 / 16%);
  border-radius: 15px;
  background: rgb(255 253 248 / 93%);
  box-shadow: 0 10px 30px rgb(21 59 49 / 5%);
}

.today-day-points,
.today-recommendations,
.today-panchanga {
  margin-top: 12px;
}

.today-personal {
  gap: 12px;
  background: linear-gradient(145deg, rgb(230 240 232 / 86%), rgb(255 253 248 / 96%) 64%);
}

.today-tara {
  border: 0;
  background: transparent;
}

.today-tara > header {
  align-items: center;
}

.today-tara > header .today-chart-picker {
  width: min(220px, 46%);
}

.today-chart-picker {
  position: relative;
  min-width: 0;
}

.today-chart-picker-trigger {
  display: flex;
  width: 100%;
  min-height: 40px;
  padding: 7px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgb(18 101 94 / 25%);
  border-radius: 9px;
  background: var(--today-paper);
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
}

.today-chart-picker-trigger span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-chart-picker-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 5px);
  right: 0;
  width: min(360px, 84vw);
  padding: 8px;
  border: 1px solid rgb(18 101 94 / 22%);
  border-radius: 12px;
  background: var(--today-paper);
  box-shadow: 0 18px 45px rgb(15 42 35 / 18%);
}

.today-chart-picker-popover[hidden] { display: none; }

.today-chart-picker-popover input {
  width: 100%;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
}

.today-chart-picker-options {
  display: grid;
  max-height: 310px;
  margin-top: 7px;
  overflow: auto;
}

.today-chart-picker-options button {
  display: grid;
  padding: 8px 9px;
  gap: 1px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.today-chart-picker-options button:hover,
.today-chart-picker-options button[aria-pressed="true"] {
  background: rgb(18 101 94 / 8%);
}

.today-chart-picker-options small {
  color: var(--today-gold);
  font-size: .64rem;
  font-weight: 750;
  text-transform: uppercase;
}

.today-chart-picker-options span {
  color: var(--vs-account-muted);
  font-size: .72rem;
}

.today-status-label {
  width: fit-content;
}

.today-dashas > header {
  display: flex;
  grid-template-columns: none;
}

.today-dasha-row.is-loading,
.today-dasha-row.is-error,
.today-dasha-row.is-unavailable {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr);
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  gap: 8px;
  border-bottom: 1px solid var(--vs-account-line);
}

.today-dasha-row.is-error span { color: #9b3b31; }

.today-chart-controls {
  align-items: stretch;
}

.today-chart-controls > div {
  align-items: center;
}

.today-chart-controls > div > span {
  padding: 0 6px;
  color: var(--vs-account-muted);
  font-size: .68rem;
  font-weight: 760;
  text-transform: uppercase;
}

.today-panchanga > header,
.today-day-points > header,
.today-recommendations > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.today-panchanga > header > p {
  max-width: 32ch;
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .78rem;
  text-align: right;
}

.today-panchanga-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid rgb(18 101 94 / 15%);
  border-radius: 12px;
}

.today-panchanga-item {
  border: 0;
  border-right: 1px solid rgb(18 101 94 / 13%);
  border-radius: 0;
}

.today-panchanga-item:last-child { border-right: 0; }

.today-day-points-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  margin: 14px 0 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.today-day-points-list li {
  display: flex;
  min-height: 58px;
  padding: 10px 11px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgb(18 101 94 / 14%);
  border-left: 3px solid rgb(18 101 94 / 36%);
  border-radius: 9px;
  background: rgb(237 244 239 / 45%);
}

.today-day-points-list li[data-importance="positive"] { border-left-color: #3d8966; }
.today-day-points-list li[data-importance="caution"] { border-left-color: var(--today-gold); }
.today-day-points-list span { font-size: .8rem; line-height: 1.25; }
.today-day-points-list time { font-size: .8rem; font-weight: 760; white-space: nowrap; }

.today-recommendation-reasons {
  margin-top: 12px;
  border-top: 1px solid var(--vs-account-line);
}

.today-recommendation-reasons summary {
  width: fit-content;
  padding: 12px 0 5px;
  color: var(--today-green);
  cursor: pointer;
  font-size: .83rem;
  font-weight: 750;
}

.today-recommendation-reasons dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 7px 0 0;
  gap: 8px;
}

.today-recommendation-reasons dl > div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  padding: 9px;
  gap: 7px;
  border: 1px solid var(--vs-account-line);
  border-radius: 8px;
}

.today-recommendation-reasons dt {
  color: var(--today-gold);
  font-size: .72rem;
  font-weight: 750;
}

.today-recommendation-reasons dd {
  display: grid;
  margin: 0;
  gap: 2px;
}

.today-recommendation-reasons dd strong { font-size: .78rem; }
.today-recommendation-reasons dd span { color: var(--vs-account-muted); font-size: .74rem; line-height: 1.35; }

.today-transit.workspace-widget {
  padding: 0;
  overflow: hidden;
}

.today-chart-widget-header {
  min-height: 58px;
  padding: 7px 10px;
  border-bottom: 1px solid rgb(18 101 94 / 16%);
  background: rgb(255 253 248 / 94%);
}

.today-chart-widget-header .workspace-chart-header-controls {
  width: fit-content;
  margin-left: auto;
  grid-template-columns: 44px 44px 44px;
}

/* Current-transit layer inside the universal chart widget -----------------
   This is a presentation layer only. Natal grahas keep their existing
   geometry and colours; the transit snapshot is rendered independently. */
.account-app .chart-viewer {
  --transit-graha: #5c7480;
  --transit-graha-muted: color-mix(in srgb, var(--transit-graha) 72%, transparent);
  --transit-graha-bg: color-mix(in srgb, var(--transit-graha) 9%, var(--paper));
}

.workspace-chart-transit-overlay-toggle {
  display: inline-flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 6px;
  background: var(--workspace-widget-surface);
  color: var(--vs-account-muted);
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.workspace-chart-transit-overlay-toggle:hover {
  border-color: color-mix(in srgb, #536b78 55%, var(--workspace-line));
  color: #405b69;
}

.workspace-chart-transit-overlay-toggle.is-active,
.workspace-chart-transit-overlay-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, #536b78 58%, var(--workspace-line));
  background: color-mix(in srgb, #536b78 10%, var(--workspace-widget-surface));
  color: #405b69;
}

.workspace-chart-transit-overlay-toggle[data-calculation-state="loading"] .workspace-chart-transit-overlay-icon {
  animation: transit-overlay-pulse 1.2s ease-in-out infinite;
}

.workspace-chart-transit-overlay-toggle[data-calculation-state="error"] {
  border-color: color-mix(in srgb, #a65d1b 55%, var(--workspace-line));
}

.workspace-chart-transit-overlay-icon {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@keyframes transit-overlay-pulse {
  50% { opacity: .38; }
}

.north-transit-grahas {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.transit-graha-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(2px, .45cqw, 4px);
  color: var(--transit-graha);
  pointer-events: none;
}

.transit-graha-row-south {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 72%;
  width: 86%;
  max-width: calc(100% - 10px);
  padding-top: clamp(2px, .4cqw, 4px);
  border-top: 1px solid color-mix(in srgb, var(--transit-graha) 23%, transparent);
  transform: translate(-50%, -50%);
}

/* A house keeps four stable visual bands when all analytical layers are on:
   arudhas/sign data at the top, natal grahas in the middle, transit grahas
   below them, and aspects at the bottom edge. */
.chart-viewer[data-transit-overlay-enabled="true"] .south-cell .graha.auto {
  top: 45%;
  max-height: 36%;
}

.chart-viewer[data-transit-overlay-enabled="true"] .chart-stage[data-arudhas-visible="true"] .south-cell.has-arudha-label .graha.auto {
  top: 48%;
  max-height: 32%;
}

.transit-graha-row-north {
  position: absolute;
  z-index: 7;
  width: max-content;
  max-width: min(26%, 17cqw);
  transform: translate(-50%, -50%);
}

.transit-graha-row[data-count="4"],
.transit-graha-row[data-count="5"],
.transit-graha-row[data-count="6"],
.transit-graha-row[data-count="7"],
.transit-graha-row[data-count="8"],
.transit-graha-row[data-count="9"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  align-items: center;
}

/* Южная карта: верхний правый угол отдан Арудхам, нижний — транзитам.
   row-reverse делает первый элемент в данных самым правым. */
.account-app .chart-viewer .south-cell > .sign {
  display: none;
}

.account-app .chart-viewer .south-arudha-group {
  align-self: start;
  justify-self: stretch;
  flex-flow: row-reverse nowrap;
  justify-content: flex-start;
  gap: 0 clamp(2px, .35cqw, 3px);
  margin-top: clamp(5px, .85cqw, 7px);
  padding: 0 clamp(6px, 1.15cqw, 9px);
  overflow: hidden;
  white-space: nowrap;
}

.account-app .chart-viewer .transit-graha-row-south {
  right: clamp(5px, .9cqw, 8px);
  bottom: clamp(5px, .9cqw, 8px);
  left: auto;
  top: auto;
  display: flex;
  flex-flow: row-reverse nowrap;
  justify-content: flex-start;
  width: auto;
  max-width: calc(100% - 10px);
  padding: 0;
  overflow: hidden;
  border-top: 0;
  transform: none;
}

.account-app .chart-viewer .transit-graha-row-south[data-count="4"],
.account-app .chart-viewer .transit-graha-row-south[data-count="5"],
.account-app .chart-viewer .transit-graha-row-south[data-count="6"],
.account-app .chart-viewer .transit-graha-row-south[data-count="7"],
.account-app .chart-viewer .transit-graha-row-south[data-count="8"],
.account-app .chart-viewer .transit-graha-row-south[data-count="9"] {
  display: flex;
  grid-template-columns: none;
}

.account-app .chart-viewer[data-transit-overlay-enabled="true"] :is(
  .aspect-label.planet-aspect-label,
  .north-aspect-label.planet-aspect-label
) {
  display: none;
}

.transit-planet {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "prefix name"
    "degree degree";
  align-items: baseline;
  justify-items: center;
  gap: 0 2px;
  min-width: 0;
  padding: 1px 2px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--transit-graha);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

.transit-planet:hover,
.transit-planet:focus-visible {
  background: var(--transit-graha-bg);
  outline: 1px solid color-mix(in srgb, var(--transit-graha) 42%, transparent);
}

.transit-prefix {
  grid-area: prefix;
  align-self: start;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(7px, 1.05cqw, 9px);
  font-style: italic;
  font-weight: 500;
  opacity: .82;
}

.transit-planet-name {
  grid-area: name;
  color: var(--transit-graha);
  font-size: clamp(14px, 2.35cqw, 18px);
  font-weight: 740;
  letter-spacing: .01em;
}

.transit-planet-degree {
  grid-area: degree;
  color: var(--transit-graha);
  font-size: clamp(9px, 1.4cqw, 12px);
  font-weight: 620;
  opacity: 1;
  white-space: nowrap;
}

.transit-planet.retro .transit-planet-name {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.transit-graha-inspector {
  position: absolute;
  z-index: 125;
  right: 12px;
  bottom: 12px;
  width: min(320px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  padding: 16px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--transit-graha) 28%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 96%, #536b78);
  box-shadow: 0 18px 40px rgba(31, 45, 45, .16);
  color: var(--ink);
}

.transit-graha-inspector-close {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 23px;
  cursor: pointer;
}

.transit-graha-inspector-kicker {
  margin: 0 38px 4px 0;
  color: var(--transit-graha);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.transit-graha-inspector h3 {
  margin: 0 38px 12px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}

.transit-graha-inspector dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.transit-graha-inspector dl > div {
  display: grid;
  grid-template-columns: minmax(95px, .8fr) minmax(0, 1.2fr);
  gap: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.transit-graha-inspector :is(dt, dd) {
  margin: 0;
  font-size: 12.5px;
}

.transit-graha-inspector dt { color: var(--muted); }
.transit-graha-inspector dd { font-weight: 620; }

.workspace-widget-transit-overlay-actions {
  display: grid;
  gap: 1px;
  margin-block: 6px;
  padding-block: 6px;
  border-block: 1px solid color-mix(in srgb, #536b78 18%, var(--line));
}

.workspace-widget-action-group-title {
  padding: 4px 12px 3px;
  color: #536b78;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.workspace-widget-transit-layers-menu button:disabled {
  opacity: .52;
}

@media (max-width: 1100px) {
  .workspace-chart-transit-overlay-toggle {
    flex: 0 0 32px;
    width: 32px;
    padding: 0;
  }

}

@media (max-width: 760px) {
  .workspace-chart-transit-overlay-toggle {
    flex-basis: 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .transit-graha-inspector {
    position: fixed;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    max-height: min(66svh, 520px);
    border-radius: 16px;
  }

  .transit-graha-row-south {
    top: 74%;
  }

  .transit-planet-degree {
    font-size: clamp(9px, 2.8cqw, 11px);
  }

  .transit-planet-name {
    font-size: clamp(13px, 4.2cqw, 17px);
  }
}

.today-transit.workspace-widget .today-transit-slot {
  border-radius: 0;
}

.today-recommendation-factors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px 0;
  gap: 8px;
}

.today-recommendation-factors article {
  display: grid;
  min-width: 0;
  padding: 12px;
  align-content: start;
  gap: 4px;
  border: 1px solid rgb(18 101 94 / 15%);
  border-radius: 10px;
  background: rgb(234 243 237 / 54%);
}

.today-recommendation-factors span {
  color: var(--today-green);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.today-recommendation-factors strong {
  font-size: .9rem;
}

.today-recommendation-factors p {
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .78rem;
  line-height: 1.42;
}

.today-tara-translation,
.today-tara-meta,
.today-tara-full-description {
  margin: 0;
}

.today-tara-translation {
  margin-top: 3px;
  color: var(--vs-account-muted);
  font-size: .76rem;
}

.today-tara-meta {
  color: var(--today-green);
  font-size: .78rem;
  font-weight: 760;
}

.today-tara-full-description {
  color: var(--vs-account-ink);
  font-size: .82rem;
  line-height: 1.5;
}

.today-tara-cycle {
  display: grid;
  padding: 11px;
  gap: 9px;
  border: 1px solid rgb(18 101 94 / 17%);
  border-radius: 11px;
  background: rgb(255 253 248 / 70%);
}

.today-tara-cycle > header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.today-tara-cycle > header strong {
  font-size: .8rem;
}

.today-tara-cycle > header span {
  color: var(--vs-account-muted);
  font-size: .68rem;
}

.today-tara-cycle-row {
  display: grid;
  gap: 4px;
}

.today-tara-cycle-label {
  color: var(--vs-account-muted);
  font-size: .64rem;
  font-weight: 750;
}

.today-tara-cycle-row > div {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 3px;
}

.today-tara-cycle-segment {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 48px;
  padding: 4px 2px;
  place-content: center;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--vs-account-line);
  border-radius: 6px;
  background: var(--today-paper);
  color: var(--vs-account-ink);
  cursor: default;
  font: inherit;
  text-align: center;
}

.today-tara-cycle-segment > span {
  position: absolute;
  top: 2px;
  left: 3px;
  color: var(--vs-account-muted);
  font-size: .55rem;
}

.today-tara-cycle-segment > i {
  position: absolute;
  top: 1px;
  right: 3px;
  color: currentColor;
  font-size: .56rem;
  font-style: normal;
  font-weight: 850;
}

.today-tara-cycle-segment > strong {
  font-size: .75rem;
}

.today-tara-cycle-segment > small {
  overflow: hidden;
  font-size: .48rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-tara-cycle-segment[data-status="favorable"] {
  border-color: color-mix(in srgb, var(--today-green) 34%, var(--vs-account-line));
}

.today-tara-cycle-segment[data-status="sensitive"] {
  border-style: dashed;
}

.today-tara-cycle-segment[data-status="challenging"] {
  border-color: color-mix(in srgb, var(--today-gold) 55%, var(--vs-account-line));
}

.today-tara-cycle-segment[data-active="true"] {
  outline: 2px solid var(--today-green);
  outline-offset: 1px;
  background: color-mix(in srgb, var(--today-green) 12%, var(--today-paper));
}

.today-tara-cycle-segment[data-janma-start="true"]::after {
  position: absolute;
  right: 3px;
  bottom: 2px;
  color: var(--today-gold);
  content: "●";
  font-size: .46rem;
}

.today-tara-recommendation {
  padding: 11px 12px;
  border-left: 3px solid var(--today-gold);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--today-gold) 8%, transparent);
}

.today-tara-recommendation strong {
  font-size: .78rem;
}

.today-tara-recommendation p,
.today-tara-explanations p,
.today-tara-how p {
  margin: 4px 0 0;
  font-size: .76rem;
  line-height: 1.46;
}

.today-tara-explanations {
  display: grid;
  gap: 5px;
  color: var(--vs-account-muted);
}

.today-tara-how {
  border-top: 1px solid rgb(18 101 94 / 15%);
}

@media (max-width: 1120px) {
  .today-dashboard-header {
    min-height: 190px;
  }

  .today-panchanga-item {
    border-right: 0;
    border-bottom: 1px solid rgb(18 101 94 / 13%);
  }
}

@media (max-width: 720px) {
  .today-dashboard-header {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 104px;
  }

  .today-dashboard-title h1 {
    font-size: clamp(1.8rem, 9vw, 2.75rem);
  }

  .today-orbit {
    width: 100px;
    height: 100px;
  }

  .today-orbit-path { inset: 10px; }
  .today-orbit-sun { width: 30px; height: 30px; }
  .today-orbit-moon {
    width: 17px;
    height: 17px;
    transform: translate(-50%, -50%) rotate(var(--moon-angle)) translateX(40px) rotate(calc(-1 * var(--moon-angle)));
  }
  .today-orbit > div { display: none; }

  .today-tara > header .today-chart-picker {
    width: 100%;
  }

  .today-panchanga > header,
  .today-day-points > header {
    display: grid;
  }

  .today-panchanga > header > p {
    text-align: left;
  }

  .today-chart-controls > div {
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
  }

  .today-chart-controls > div:first-child,
  .today-chart-controls > div:last-child {
    grid-template-columns: auto repeat(2, minmax(0, 1fr));
  }

  .today-day-points-list,
  .today-recommendation-reasons dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-recommendation-factors {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-chart-widget-header .workspace-chart-header-controls {
    grid-template-columns: 42px 42px 42px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .today-orbit-moon {
    transition: none;
  }
}

.workspace-widget-tarabala .workspace-widget-body {
  display: grid;
  padding: 12px;
  gap: 10px;
}

.workspace-tara-source {
  display: block;
  min-width: 0;
  max-width: 190px;
  align-items: center;
  color: var(--vs-account-muted);
  font-size: .75rem;
  font-weight: 700;
}

.workspace-tara-source select {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 4px 28px 4px 9px;
  border: 1px solid var(--vs-account-line);
  border-radius: 8px;
  background: var(--vs-account-surface);
  color: var(--vs-account-text);
  font: inherit;
}

.workspace-tara-state {
  display: grid;
  min-height: 150px;
  place-items: center;
  color: var(--vs-account-muted);
  text-align: center;
}

.workspace-tara-result {
  display: grid;
  padding: 15px;
  gap: 11px;
  border: 1px solid rgb(18 101 94 / 17%);
  border-radius: 12px;
  background: linear-gradient(145deg, rgb(232 242 234 / 78%), rgb(255 253 248 / 95%));
}

.workspace-tara-result h3 {
  margin: 2px 0;
  font-family: var(--vs-account-serif);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.workspace-tara-result p {
  margin: 0;
  color: var(--vs-account-muted);
  font-size: .86rem;
  line-height: 1.48;
}

.workspace-tara-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.workspace-tara-lists section {
  padding: 9px;
  border: 1px solid var(--vs-account-line);
  border-radius: 8px;
}

.workspace-tara-lists ul {
  display: grid;
  margin: 6px 0 0;
  padding-left: 17px;
  gap: 3px;
  font-size: .78rem;
}

.workspace-tara-result time {
  color: var(--vs-account-muted);
  font-size: .76rem;
  font-weight: 700;
}

@media (max-width: 520px) {
  .workspace-widget-tarabala {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .account-app .workspace-page .workspace-widget-tarabala > .workspace-tara-header {
    grid-template-columns: minmax(0, 1fr) 32px !important;
    grid-template-rows: 36px 44px !important;
    min-height: 88px !important;
    height: auto !important;
    overflow: visible;
  }

  .workspace-tara-header > .workspace-widget-drag-handle {
    display: none !important;
  }

  .workspace-tara-header > .workspace-widget-title {
    grid-column: 1 !important;
    grid-row: 1;
  }

  .workspace-tara-header > .workspace-widget-actions {
    grid-column: 2 !important;
    grid-row: 1;
  }

  .workspace-tara-header > .workspace-tara-source {
    grid-column: 1 / -1 !important;
    grid-row: 2;
    width: 100%;
    max-width: none;
  }

  .workspace-tara-source select {
    min-height: 40px;
  }

  .workspace-tara-lists {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Workspace visual hierarchy v6 -------------------------------------------
   Presentation-only refinement: the calculation and layout models remain
   unchanged. Canvas, widgets and inset data now use three related surfaces. */
.account-app {
  --workspace-canvas-surface: #f6f5f0;
  --workspace-widget-surface: #fcfbf8;
  --workspace-inset-surface: #f3f2ed;
  --workspace-widget-border: #d8d5cc;
  --workspace-line: #e9e6de;
  --workspace-line-hover: #b4b9af;
  --workspace-line-active: var(--vs-account-accent);
  --vs-account-ink: #28322f;
  --vs-account-muted: #53645d;
  --vs-account-tertiary: #69756d;
  --paper: var(--workspace-widget-surface);
  --mist: var(--workspace-canvas-surface);
  --ink: var(--vs-account-ink);
  --ink-soft: var(--vs-account-muted);
  --muted: var(--vs-account-tertiary);
  --vs-account-bg: var(--workspace-canvas-surface);
  --vs-account-bg-soft: var(--workspace-canvas-surface);
  --vs-account-workspace-bg: var(--workspace-canvas-surface);
  --vs-account-surface: var(--workspace-widget-surface);
  --vs-account-surface-solid: var(--workspace-widget-surface);
  --vs-account-line: var(--workspace-line);
  --vs-account-line-strong: var(--workspace-widget-border);
  --strength-track: #e6e7e1;
  --strength-fill: #7c948a;
  --strength-kashta: #ba8d79;
  --strength-ishta: #8ca68d;
  --vs-graha-accent-su: #956620;
  --vs-graha-accent-mo: #506b79;
  --vs-graha-accent-ma: #a44e44;
  --vs-graha-accent-me: #3a7558;
  --vs-graha-accent-ju: #a36a38;
  --vs-graha-accent-ve: #795b91;
  --vs-graha-accent-sa: #4c6695;
  --moon-lit: #f6eed1;
  --moon-mid: #778477;
  --moon-shade: #384d41;
  --moon-dark: #1e352a;
  --moon-crater: #10231a24;
  --moon-shadow: #173e2930;
  --workspace-surface: var(--workspace-widget-surface);
  --workspace-header-surface: var(--workspace-widget-surface);
  --workspace-grid-gap: 10px;
  --workspace-widget-grid-gap: 10px;
  --workspace-widget-radius: 9px;
  --workspace-widget-header-height: 44px;
}

.account-app .workspace-page,
.account-app .workspace-canvas.workspace-local-view,
.account-app #workspace-panel-main.workspace-local-view {
  background: var(--workspace-canvas-surface);
}

.account-app .workspace-grid,
.account-app .workspace-rows,
.account-app .workspace-row-shell,
.account-app .workspace-row {
  background: var(--workspace-canvas-surface);
}

.account-app .workspace-canvas,
.account-app #workspace-panel-main.workspace-local-view {
  padding: 0;
}

.account-app .workspace-rows,
.account-app .workspace-rows:has(> .workspace-row-shell) {
  gap: var(--workspace-widget-grid-gap);
}

.account-app .workspace-row {
  gap: var(--workspace-widget-grid-gap);
}

.account-app .workspace-row-shell {
  margin: 0;
}

.account-app .workspace-row::before,
.account-app .workspace-row::after {
  position: absolute;
  z-index: 3;
  display: none;
  background: var(--workspace-line);
  content: "";
  pointer-events: none;
}

.account-app .workspace-row::before {
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
}

.account-app .workspace-row::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
}

.account-app .workspace-page .workspace-widget {
  overflow: visible;
  border: 1px solid var(--workspace-widget-border) !important;
  border-radius: var(--workspace-widget-radius);
  background: var(--workspace-widget-surface) !important;
  box-shadow: none !important;
  color: var(--vs-account-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.account-app .workspace-page .workspace-widget:hover {
  border-color: var(--workspace-line-hover) !important;
}

.account-app .workspace-page .workspace-widget:focus-within,
.account-app .workspace-page .workspace-widget.is-active,
.account-app .workspace-page .workspace-widget-chart.is-active-chart {
  border-color: var(--workspace-line-active) !important;
}

.account-app .workspace-page .workspace-widget.is-dragging,
.account-app .workspace-page .workspace-widget.is-dragging-source,
.account-app .workspace-page .workspace-widget.is-drag-preview-source {
  border-color: var(--workspace-line-active) !important;
  outline: 1px solid color-mix(in srgb, var(--workspace-line-active) 72%, transparent);
  outline-offset: 2px;
  box-shadow:
    0 4px 12px rgba(25, 22, 18, .08),
    0 16px 34px rgba(25, 22, 18, .12) !important;
}

.account-app .workspace-page .workspace-widget[data-calculation-status="error"],
.account-app .workspace-page .workspace-widget.is-error {
  border-left-color: color-mix(in srgb, #a5453f 72%, var(--workspace-line)) !important;
}

.account-app .workspace-page .workspace-widget > .workspace-widget-header {
  min-height: var(--workspace-widget-header-height) !important;
  height: var(--workspace-widget-header-height) !important;
  padding: 6px 8px;
  gap: 6px;
  overflow: hidden;
  border-bottom: 1px solid var(--workspace-line) !important;
  border-radius: var(--workspace-widget-radius) var(--workspace-widget-radius) 0 0;
  background: var(--workspace-widget-surface) !important;
}

.account-app .workspace-page .workspace-widget-body,
.account-app .workspace-page .workspace-widget .chart-viewer,
.account-app .workspace-page .workspace-widget .chart-panel {
  background: var(--workspace-widget-surface) !important;
}

.account-app .workspace-page .workspace-widget-body {
  border-radius: 0;
}

.workspace-widget-title strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.workspace-widget-title span,
.workspace-widget-method,
.workspace-widget-source {
  color: var(--vs-account-muted);
  font-size: 12.5px;
  line-height: 1.25;
}

.workspace-widget-drag-handle,
.workspace-widget-actions button,
.workspace-widget [data-open-widget-action-menu],
.workspace-chart-widget-header button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 6px;
}

.workspace-sheet-bar.workspace-unified-tabbar,
.workspace-sheet-switcher {
  border-bottom: 1px solid var(--workspace-line) !important;
  background: var(--workspace-canvas-surface);
}

.workspace-unified-tabbar .workspace-sheet-tabs {
  align-items: end;
  gap: 2px;
}

.workspace-unified-tabbar .workspace-sheet-tab {
  margin-bottom: -1px;
  border: 1px solid transparent !important;
  border-bottom: 0 !important;
  border-radius: 7px 7px 0 0 !important;
  background: transparent !important;
  color: var(--vs-account-muted);
  box-shadow: none !important;
  opacity: .82;
}

.workspace-unified-tabbar .workspace-sheet-tab:hover {
  border-color: color-mix(in srgb, var(--workspace-line) 72%, transparent) !important;
  background: color-mix(in srgb, var(--workspace-widget-surface) 58%, transparent) !important;
  color: var(--vs-account-ink);
  opacity: 1;
}

.workspace-unified-tabbar .workspace-sheet-tab.is-active,
.workspace-unified-tabbar .workspace-sheet-tab.active,
.workspace-unified-tabbar .workspace-sheet-tab:has(> [role="tab"][aria-selected="true"]) {
  border-color: var(--workspace-line) !important;
  background: var(--workspace-widget-surface) !important;
  color: var(--vs-account-ink);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--vs-account-gold) 78%, transparent) !important;
  opacity: 1;
}

/* Planet positions retain the current columns without premature overflow. */
.planet-table-panel .planet-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: visible;
}

.planet-table-panel .planet-table-wrap > table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.planet-table-panel .planet-table-wrap :is(th, td) {
  min-width: 0;
  padding: 9px 6px;
  border-bottom-color: var(--workspace-line);
}

.planet-table-panel .planet-table-wrap th {
  background: color-mix(in srgb, var(--workspace-inset-surface) 72%, var(--workspace-widget-surface));
  color: color-mix(in srgb, var(--vs-account-muted) 88%, var(--vs-account-ink));
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
}

.planet-table-panel .planet-table-wrap td {
  font-size: 14px;
  line-height: 1.35;
}

.planet-table-panel .planet-table-wrap tbody tr {
  transition: background-color .14s ease;
}

.planet-table-panel .planet-table-wrap tbody tr:hover {
  background: color-mix(in srgb, var(--workspace-inset-surface) 66%, transparent);
}

.planet-table-widget-header {
  grid-template-columns: 32px minmax(112px, auto) minmax(0, 1fr) 32px !important;
  overflow: visible !important;
}

.planet-table-header-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}

.planet-table-header-controls label {
  display: block;
  min-width: 0;
}

.planet-table-header-controls label:first-child {
  width: clamp(130px, 24vw, 230px);
}

.planet-table-header-controls label:nth-child(2) {
  width: clamp(108px, 16vw, 160px);
}

.planet-table-header-controls :is(select, summary) {
  height: 32px;
  min-height: 32px;
  border: 1px solid var(--workspace-line);
  border-radius: 6px;
  background: var(--workspace-widget-surface);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: 13px;
}

.planet-table-header-controls select {
  width: 100%;
  min-width: 0;
  padding: 3px 24px 3px 8px;
  text-overflow: ellipsis;
}

.planet-table-header-controls .planet-table-precision-control {
  flex: 0 0 66px;
}

.planet-table-column-settings {
  position: relative;
  flex: 0 0 32px;
}

.planet-table-column-settings > summary {
  display: grid;
  width: 32px;
  padding: 0;
  cursor: pointer;
  list-style: none;
  place-items: center;
  font-size: 18px;
}

.planet-table-column-settings > summary::-webkit-details-marker {
  display: none;
}

.planet-table-column-settings > div {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: 250px;
  padding: 10px;
  gap: 7px;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background: var(--workspace-widget-surface);
  box-shadow: 0 12px 30px rgba(25, 22, 18, .12);
}

.planet-table-column-settings label {
  display: flex;
  width: auto !important;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.planet-table-panel .planet-table-wrap :is(th, td):nth-child(1) { width: 16%; }
.planet-table-panel .planet-table-wrap :is(th, td):nth-child(2) { width: 7%; }
.planet-table-panel .planet-table-wrap :is(th, td):nth-child(3) { width: 13%; }
.planet-table-panel .planet-table-wrap :is(th, td):nth-child(4) { width: 13%; }
.planet-table-panel .planet-table-wrap :is(th, td):nth-child(5) { width: 8%; }
.planet-table-panel .planet-table-wrap :is(th, td):nth-child(6) { width: 25%; }
.planet-table-panel .planet-table-wrap :is(th, td):nth-child(7) { width: 10%; }
.planet-table-panel .planet-table-wrap :is(th, td):nth-child(8) { width: 8%; }

.planet-table-panel .planet-table-wrap.has-optional-columns {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.planet-table-panel .planet-table-wrap.has-optional-columns > table {
  min-width: max(100%, calc(var(--planet-table-column-count) * 92px));
  table-layout: auto;
}

.planet-table-panel .planet-table-wrap.has-optional-columns :is(th, td) {
  width: auto !important;
}

.planet-table-boundary-indicator {
  display: inline-block;
  margin-left: 4px;
  color: color-mix(in srgb, var(--vs-account-gold) 82%, var(--vs-account-ink));
  font-size: .82em;
  line-height: 1;
  vertical-align: .08em;
}

.planet-table-panel tr[data-boundary-sensitive="true"] {
  background: color-mix(in srgb, var(--vs-account-gold) 6%, transparent);
}

.planet-table-calculation-details {
  border-top: 1px solid var(--workspace-line);
  background: color-mix(in srgb, var(--workspace-inset-surface) 58%, var(--workspace-widget-surface));
}

.planet-table-calculation-details > summary {
  padding: 9px 12px;
  cursor: pointer;
  color: var(--vs-account-accent);
  font-size: 13px;
  font-weight: 650;
}

.planet-table-calculation-details-intro {
  display: flex;
  padding: 0 12px 10px;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--vs-account-muted);
  font-size: 12.5px;
}

.planet-table-calculation-traces {
  display: grid;
  max-height: 360px;
  padding: 0 12px 12px;
  overflow: auto;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 8px;
}

.planet-table-calculation-traces section {
  padding: 9px;
  border: 1px solid var(--workspace-line);
  border-radius: 7px;
  background: var(--workspace-widget-surface);
}

.planet-table-calculation-traces h4 {
  margin: 0 0 6px;
  font-size: 14px;
}

.planet-table-calculation-traces dl {
  display: grid;
  margin: 0;
  gap: 3px;
}

.planet-table-calculation-traces dl > div {
  display: grid;
  grid-template-columns: minmax(112px, .9fr) minmax(0, 1.1fr);
  gap: 8px;
  font-size: 11.5px;
}

.planet-table-calculation-traces :is(dt, dd) {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.planet-table-calculation-traces dt {
  color: var(--vs-account-muted);
}

.planet-table-boundary-warning {
  margin: 8px 0 0;
  color: color-mix(in srgb, var(--vs-account-gold) 70%, var(--vs-account-ink));
  font-size: 12px;
  line-height: 1.35;
}

.planet-table-panel .planet-table-graha-cell {
  color: var(--vs-account-ink);
  font-weight: 650;
}

.planet-table-panel :is(.planet-table-jaimini-head, .planet-table-jaimini-cell) {
  border-inline: 1px solid color-mix(in srgb, var(--vs-account-gold) 22%, var(--workspace-line));
  background: color-mix(in srgb, var(--workspace-inset-surface) 68%, transparent);
}

.planet-table-panel :is(.planet-table-lord, .planet-table-sort-mode, .planet-table-sort-indicator) {
  color: var(--vs-account-muted);
}

@media (max-width: 760px) {
  .planet-table-widget-header {
    grid-template-columns: 32px minmax(0, 1fr) 32px !important;
  }

  .planet-table-widget-header > .workspace-widget-title {
    display: none;
  }

  .planet-table-header-controls {
    justify-content: flex-start;
  }

  .planet-table-header-controls label:first-child {
    width: min(42vw, 170px);
  }

  .planet-table-header-controls label:nth-child(2) {
    width: min(30vw, 128px);
  }

  .planet-table-header-controls .planet-table-precision-control {
    display: none;
  }

  .planet-table-calculation-details-intro {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Arudha labels: stronger without changing their calculated anchors. */
.chart-arudha-group {
  gap: 3px 5px;
  color: color-mix(in srgb, var(--chart-arudha-color) 90%, var(--vs-account-ink));
  font-size: clamp(10px, .72rem, 12px);
  font-weight: 700;
  letter-spacing: .02em;
}

.chart-arudha-marker {
  padding: 1px 2px;
  line-height: 1.15;
}

.chart-arudha-marker[data-arudha-code="AL"],
.chart-arudha-marker[data-arudha-code="UL"] {
  color: color-mix(in srgb, var(--chart-arudha-color) 72%, var(--vs-account-ink));
  font-weight: 850;
}

/* Period rows share the same data scale as the planet positions table. */
.periods-view-list-header,
.periods-view-row {
  min-height: 40px;
  padding: 9px 10px;
  font-size: var(--vs-type-data-table-value-size, 13px);
  line-height: 1.35;
}

.periods-view-list-header {
  min-height: 34px;
  background: color-mix(in srgb, var(--workspace-inset-surface) 74%, var(--workspace-widget-surface));
  color: var(--vs-account-muted);
  font-size: var(--vs-type-data-table-heading-size, 11px);
  font-weight: 600;
}

.periods-view-dates {
  color: color-mix(in srgb, var(--vs-account-muted) 86%, transparent);
  font-weight: 400;
}

.periods-view-age {
  color: color-mix(in srgb, var(--vs-account-muted) 86%, transparent);
  font-weight: 600;
}

.narayana-current-line.periods-view-row {
  font-size: var(--vs-type-data-table-value-size, 13px);
}

.periods-view-row.is-current {
  border-left: 3px solid var(--vs-account-gold);
  background: color-mix(in srgb, var(--vs-account-gold) 8%, var(--workspace-widget-surface));
  box-shadow: none;
}

.periods-view-row.is-selected {
  border-left: 3px solid var(--vs-account-accent);
  background: color-mix(in srgb, var(--vs-account-accent) 7%, var(--workspace-widget-surface));
}

.periods-view-row.is-current.is-selected {
  border-left-color: var(--vs-account-gold);
  outline: 2px solid color-mix(in srgb, var(--vs-account-accent) 32%, transparent);
}

/* Yogas grouped registry -------------------------------------------------- */
.workspace-row > .workspace-widget[data-widget-type="yogas"] {
  grid-template-rows: var(--workspace-widget-header-height) minmax(0, 1fr) !important;
}

.yogas-widget .workspace-widget-header {
  grid-template-columns: 32px minmax(0, 1fr) 32px !important;
  grid-template-rows: 32px !important;
  min-height: var(--workspace-widget-header-height) !important;
  height: var(--workspace-widget-header-height) !important;
  padding: 6px 8px !important;
}

.yogas-widget .workspace-widget-drag-handle {
  grid-column: 1;
}

.yogas-widget .yoga-widget-heading {
  display: flex;
  grid-column: 2;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.yogas-widget .yoga-widget-heading span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yogas-widget .yoga-widget-header-meta {
  display: none;
}

.yogas-widget .workspace-widget-actions {
  grid-column: 3;
}

.yogas-view {
  grid-template-rows: auto minmax(0, 1fr);
}

.yoga-view-mobile-filter-bar {
  display: none;
}

.yoga-view-filters {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  gap: 5px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--workspace-line);
  background: var(--workspace-widget-surface);
}

.yoga-view-found-count {
  align-self: center;
  color: var(--vs-account-green, #17695f);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.yoga-view-filters :is(select, input),
.yoga-view-more {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  height: 32px;
  border: 1px solid var(--workspace-line);
  border-radius: 6px;
  background: var(--workspace-widget-surface);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: 13.5px;
}

.yoga-view-filters :is(select, input) {
  padding: 4px 7px;
}

.yoga-view-more {
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}

.yoga-view-filters :is(select, input, button):focus-visible {
  border-color: var(--workspace-line-active);
  outline: 2px solid color-mix(in srgb, var(--workspace-line-active) 35%, transparent);
  outline-offset: 1px;
}

.yogas-widget .yoga-view-scroll {
  height: 100%;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y;
  scrollbar-gutter: stable;
}

.yoga-view-category-sticky {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 9px 6px;
  gap: 5px;
  border-block: 1px solid var(--workspace-line);
  background: var(--workspace-inset-surface);
  color: color-mix(in srgb, var(--vs-account-muted) 90%, var(--vs-account-ink));
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.yoga-view-group:first-child .yoga-view-category-sticky {
  border-top: 0;
}

.yoga-view-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 26px;
  align-items: center;
  width: 100%;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 7px 8px 7px 10px;
  gap: 7px;
  overflow: hidden;
  border-bottom: 1px solid var(--workspace-line);
  background: transparent;
  color: var(--vs-account-ink);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.35;
}

.yoga-view-row:hover,
.yoga-view-row.is-selected {
  background: color-mix(in srgb, var(--workspace-inset-surface) 72%, transparent);
}

.yoga-view-row:focus-visible {
  outline: 2px solid var(--workspace-line-active);
  outline-offset: -2px;
}

.yoga-view-row-copy {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 5px;
  overflow: hidden;
  white-space: nowrap;
}

.yoga-result-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
}

.yoga-reference-badge {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--workspace-line-active) 45%, var(--workspace-line));
  border-radius: 999px;
  color: var(--vs-account-green, #17695f);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
}

.yoga-result-separator {
  flex: 0 0 auto;
  color: var(--vs-account-muted);
}

.yoga-result-participants {
  flex: 0 0 auto;
  white-space: nowrap;
}

.yoga-view-row-confirmations,
.yoga-view-row-quiet-status {
  color: var(--vs-account-muted);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

.yoga-view-row-confirmations {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yoga-view-row-status {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--vs-account-muted);
  font-size: 17px;
}

.yoga-view-row:hover .yoga-view-row-status {
  color: var(--vs-account-accent);
}

.yoga-graha {
  font-weight: 700;
}

.yoga-inspector {
  background: var(--workspace-widget-surface);
}

.yoga-inspector-header {
  min-height: 58px;
  padding: 9px 11px;
}

.yoga-inspector-header h2 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.yoga-inspector-header span,
.yoga-inspector-actions span {
  font-size: 12.5px;
}

.yoga-inspector-section h3,
.yoga-inspector-checks h3 {
  font-size: 13px;
  font-weight: 600;
}

.yoga-inspector-scroll :is(p, li, dt, dd),
.yoga-methodology-link,
.yoga-inspector-actions button {
  font-size: 13.5px;
  line-height: 1.45;
}

.yoga-inspector-presentation-note {
  padding: 7px 9px;
  border-left: 2px solid var(--vs-account-gold);
  background: color-mix(in srgb, var(--vs-account-gold) 7%, transparent);
  color: var(--vs-account-muted);
}

@media (max-width: 760px) {
  .account-app {
    --workspace-grid-gap: 6px;
  }

  .account-app .workspace-page .workspace-widget {
    width: 100%;
    max-width: 100%;
  }

  .planet-table-panel .planet-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .planet-table-panel .planet-table-wrap > table {
    width: 100%;
    max-width: none;
    min-width: 720px;
    table-layout: fixed;
  }

  .yoga-view-filters {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .yoga-view-row {
    grid-template-columns: minmax(0, 1fr) 26px;
    min-height: 42px;
    height: 42px;
    max-height: 42px;
    font-size: 13.5px;
  }

  .yoga-view-row-status {
    grid-column: 2;
  }

  .yoga-view-row-quiet-status {
    display: none;
  }

  .yoga-result-title {
    flex-shrink: 1;
  }

  .yoga-result-participants {
    flex-shrink: 0;
  }

  .yoga-view-row-confirmations {
    display: none;
  }

  .yoga-inspector--bottom-sheet {
    position: fixed;
    right: 8px;
    bottom: calc(74px + env(safe-area-inset-bottom));
    left: 8px;
    max-height: min(68dvh, 640px);
    border: 1px solid var(--workspace-line);
    border-radius: 10px;
  }

  .planet-table-panel .planet-table-wrap :is(th, td) {
    padding: 6px 2px;
  }

  .planet-table-panel .planet-table-wrap th {
    font-size: 11.5px;
    line-height: 1.15;
  }

  .planet-table-panel .planet-table-wrap td {
    font-size: 12.5px;
  }

  .planet-table-panel .planet-table-wrap th:nth-child(8) [data-planet-table-sort],
  .planet-table-panel .planet-table-jaimini-cell .jaimini-karaka-token {
    font-size: 11.5px;
  }
}

@media (max-width: 430px) {
  .workspace-widget-title strong {
    font-size: 15px;
  }

  .workspace-widget-title span {
    font-size: 12.5px;
  }

  .yoga-view-category-sticky {
    font-size: 11.5px;
  }

  .yoga-view-row-copy {
    gap: 4px;
  }
}

/* Real lunar phase: the illuminated SVG silhouette is calculated from elongation. */
.today-orbit-moon {
  width: 32px;
  height: 32px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.today-orbit-moon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 3px 4px rgb(15 28 25 / 24%))
    drop-shadow(0 0 5px rgb(245 223 167 / 44%));
  transform-origin: 50% 50%;
  animation: today-moon-phase-breathe 4.8s ease-in-out infinite;
}

.today-moon-phase-shadow {
  fill: #172421;
}

.today-moon-phase-light {
  fill: #f5eedc;
}

.today-moon-phase-craters {
  fill: #718078;
  opacity: .2;
  mix-blend-mode: multiply;
}

.today-moon-phase-rim {
  fill: none;
  stroke: rgb(242 236 218 / 58%);
  stroke-width: 1.4px;
}

.today-orbit[data-moon-phase="new"] .today-orbit-moon svg {
  filter: drop-shadow(0 3px 5px rgb(15 28 25 / 34%));
}

.today-orbit[data-moon-phase="new"] .today-moon-phase-craters {
  fill: #8b9891;
  opacity: .12;
}

.today-orbit[data-moon-phase="full"] .today-orbit-moon svg {
  filter:
    drop-shadow(0 3px 4px rgb(15 28 25 / 20%))
    drop-shadow(0 0 7px rgb(245 223 167 / 58%));
}

.today-orbit-path {
  animation: today-moon-orbit-pulse 6s ease-in-out infinite;
}

@keyframes today-moon-phase-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.035);
  }
}

@keyframes today-moon-orbit-pulse {
  0%,
  100% {
    border-color: rgb(18 101 94 / 18%);
  }
  50% {
    border-color: rgb(18 101 94 / 31%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .today-orbit-moon svg,
  .today-orbit-path {
    animation: none;
  }
}

/* Universal chart widget source + context selectors ---------------------- */
.workspace-page .workspace-chart-widget-header .workspace-chart-header-controls {
  position: relative !important;
  inset: auto !important;
  grid-column: 2;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 !important;
  gap: 4px;
  overflow: hidden;
}

.workspace-page:not(.is-workspace-editing) .workspace-chart-widget-header .workspace-chart-header-controls {
  grid-column: 1 !important;
}

.workspace-chart-source-control,
.workspace-chart-context-control {
  position: static !important;
  min-width: 0;
  height: 32px;
  transform: none !important;
  pointer-events: auto;
}

.workspace-chart-source-control {
  flex: 0 1 38%;
  min-width: 88px;
}

.workspace-chart-fixed-source {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 9px;
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--workspace-widget-surface) 92%, var(--vs-account-accent));
  color: var(--vs-account-ink);
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-chart-context-control {
  flex: 1 1 44%;
  width: auto !important;
  min-width: 104px;
}

.workspace-chart-source-control select,
.workspace-chart-context-control select,
button.workspace-chart-context-control {
  width: 100%;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  padding: 0 25px 0 9px;
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 6px;
  background: var(--workspace-widget-surface);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.workspace-chart-context-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 9px;
  text-align: left;
}

button.workspace-chart-context-control > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-chart-source-control select:hover,
.workspace-chart-context-control:is(select, button):hover,
.workspace-chart-context-control select:hover {
  border-color: var(--workspace-line-hover);
}

.workspace-chart-source-control select:focus-visible,
.workspace-chart-context-control:is(select, button):focus-visible,
.workspace-chart-context-control select:focus-visible {
  border-color: var(--workspace-line-active);
  outline: 1px solid var(--workspace-line-active);
  outline-offset: 1px;
}

@media (max-width: 760px) {
  .workspace-page .workspace-chart-widget-header .workspace-chart-header-controls {
    gap: 3px;
  }

  .workspace-chart-source-control {
    flex-basis: 40%;
    min-width: 80px;
  }

  .workspace-chart-context-control {
    flex-basis: 42%;
    min-width: 96px;
  }

  .workspace-chart-source-control select,
  .workspace-chart-context-control select,
  button.workspace-chart-context-control {
    padding-left: 7px;
    font-size: 12.5px;
  }

  .workspace-chart-fixed-source {
    padding-inline: 7px;
    font-size: 12.5px;
  }
}

/* Today editorial v4 */
.today-page {
  min-width: 0;
  overflow-x: clip;
  background: var(--workspace-canvas-surface);
}

.today-dashboard {
  --today-canvas: var(--workspace-canvas-surface);
  --today-paper: var(--workspace-widget-surface);
  --today-paper-muted: var(--workspace-inset-surface);
  --today-ink: var(--vs-account-ink);
  --today-muted: var(--vs-account-muted);
  --today-line: var(--workspace-line);
  --today-gold: var(--vs-account-gold);
  --today-green: var(--vs-account-accent);
  box-sizing: border-box;
  width: min(100%, 1500px);
  min-width: 0;
  margin-inline: auto;
  padding: clamp(14px, 1.8vw, 28px);
  color: var(--today-ink);
  background: var(--today-canvas);
}

.today-dashboard-header,
.today-context-card,
.today-transit,
.today-summary,
.today-day-points,
.today-recommendations {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--workspace-widget-border);
  border-radius: var(--workspace-widget-radius);
  background: var(--today-paper);
  box-shadow: 0 1px 2px rgb(20 28 24 / 2%), 0 10px 30px rgb(20 28 24 / 3.5%);
}

.today-dashboard-header {
  display: grid;
  min-height: 174px;
  margin: 0 0 16px;
  padding: clamp(22px, 2.4vw, 34px);
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 16%, rgb(201 149 73 / 9%), transparent 19rem),
    var(--today-paper);
}

.today-dashboard-title {
  display: grid;
  max-width: 900px;
  gap: 7px;
}

.today-dashboard-kicker,
.today-section-eyebrow,
.today-summary-label {
  color: var(--today-green);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.today-dashboard-title h1 {
  margin: 0;
  font-family: var(--vs-account-serif, Literata, Georgia, serif);
  font-size: clamp(42px, 3.3vw, 52px);
  font-weight: 520;
  line-height: 1.06;
  letter-spacing: -.025em;
}

.today-hero-facts {
  margin: 3px 0 0;
  color: var(--today-muted);
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 560;
  line-height: 1.45;
}

.today-orbit {
  width: 132px;
  height: 132px;
}

.today-orbit-path {
  inset: 14px;
}

.today-orbit-sun {
  width: 36px;
  height: 36px;
}

.today-orbit-moon {
  width: 21px;
  height: 21px;
  transform: translate(-50%, -50%) rotate(var(--moon-angle)) translateX(52px) rotate(calc(-1 * var(--moon-angle)));
}

.today-orbit > div {
  right: -2px;
  bottom: -2px;
  background: var(--today-paper);
}

.today-dashboard-primary {
  display: grid;
  height: clamp(620px, 45vw, 680px);
  margin: 0 0 16px;
  grid-template-columns: minmax(390px, 1.08fr) minmax(380px, .92fr);
  grid-template-rows: auto minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: stretch;
  gap: 12px 16px;
}

.today-dashboard-primary > .today-transit {
  grid-column: 1;
  grid-row: 1 / -1;
  height: 100%;
  min-height: 0;
}

.today-dashboard-primary > .today-context-card {
  grid-column: 2;
  grid-row: 1;
}

.today-dashboard-primary > .today-summary-general {
  grid-column: 2;
  grid-row: 2;
}

.today-dashboard-primary > .today-summary-personal {
  grid-column: 2;
  grid-row: 3;
}

.today-context-card {
  display: grid;
  min-height: 94px;
  padding: 14px clamp(18px, 2vw, 24px);
  grid-template-columns: minmax(155px, .66fr) minmax(220px, 1.34fr);
  align-items: center;
  gap: 18px;
}

.today-context-heading {
  display: grid;
  gap: 3px;
}

.today-context-heading h2 {
  margin: 0;
  font-family: var(--vs-account-serif, Literata, Georgia, serif);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 520;
  line-height: 1.18;
}

.today-context-selector {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.today-context-selector > p {
  margin: 0 2px;
  overflow: hidden;
  color: var(--today-muted);
  font-size: 13px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-context-card .today-chart-picker-trigger {
  min-height: 42px;
  border-color: rgb(23 105 95 / 30%);
  background: #fffdfa;
  font-size: 16px;
  font-weight: 650;
}

.today-context-card .today-chart-picker-trigger svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.today-chart-picker-popover > header {
  display: flex;
  min-height: 34px;
  margin-bottom: 6px;
  padding: 0 2px 6px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--today-line);
}

.today-chart-picker-popover > header strong {
  font-size: 14px;
  font-weight: 680;
}

.today-chart-picker-popover > header button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--today-muted);
  cursor: pointer;
  font: inherit;
  font-size: 22px;
}

.today-chart-picker-popover > header button:hover {
  background: rgb(23 105 95 / 8%);
  color: var(--today-ink);
}

.today-transit.workspace-widget {
  display: grid;
  padding: 0;
  grid-template-rows: 48px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 16px;
  background: var(--today-paper);
}

.today-chart-widget-header {
  display: flex;
  min-height: 48px;
  padding: 4px 10px 4px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--today-line);
  background: transparent;
}

.today-chart-source {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.today-chart-source > small {
  color: var(--today-muted);
  font-size: 11.5px;
  line-height: 1.1;
}

.today-chart-widget-header .workspace-chart-header-controls {
  margin-left: 0;
  grid-template-columns: repeat(3, 38px);
}

.today-transit-slot {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 10px;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 0;
}

.today-transit-chart,
.today-transit-chart .chart-panel,
.today-transit-chart .chart-fit-container {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}

.today-transit-chart svg,
.today-transit-chart canvas {
  display: block;
  margin: auto;
}

.today-summary {
  display: grid;
  padding: 0 clamp(18px, 2vw, 28px);
  align-content: start;
  overflow: auto;
  scrollbar-width: thin;
}

.today-summary > h2 {
  margin: 0;
  padding: 12px 0 8px;
  font-family: var(--vs-account-serif, Literata, Georgia, serif);
  font-size: clamp(32px, 2.5vw, 38px);
  font-weight: 540;
  line-height: 1.1;
}

.today-summary-row {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 8px 0 8px 23px;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--today-line);
}

.today-summary-marker {
  position: absolute;
  top: 17px;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--today-green);
  transform: rotate(45deg);
}

.today-summary-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.today-summary-row strong {
  min-width: 0;
  color: var(--today-ink);
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 540;
  line-height: 1.3;
}

.today-summary-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.today-summary-pair strong + strong {
  padding-left: 18px;
  border-left: 1px solid var(--today-line);
}

.today-summary-personal {
  padding-top: 0;
}

.today-summary-personal > header {
  display: grid;
  padding: 12px 0 8px;
  gap: 2px;
}

.today-personal-name {
  color: var(--today-green);
  font-size: 12px;
  font-weight: 790;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.today-summary-personal > header h2 {
  margin: 0;
  font-family: var(--vs-account-serif, Literata, Georgia, serif);
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 520;
  line-height: 1.18;
}

.today-personal-summary-row {
  display: grid;
  min-width: 0;
  padding: 8px 0;
  gap: 3px;
  border-top: 1px solid var(--today-line);
}

.today-personal-summary-row .today-summary-label {
  font-size: 11.5px;
}

.today-summary-details {
  min-width: 0;
}

.today-summary-details > summary,
.today-summary-period > summary {
  display: grid;
  min-height: 32px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.today-summary-details > summary {
  grid-template-columns: minmax(0, 1fr) auto;
}

.today-personal-summary-row.is-tara .today-summary-details > summary {
  min-height: 34px;
}

.today-personal-summary-row.is-tara .today-summary-details > summary strong {
  font-size: 18px;
  font-weight: 560;
}

.today-summary-details > summary::-webkit-details-marker,
.today-summary-period > summary::-webkit-details-marker {
  display: none;
}

.today-summary-details > summary > span,
.today-summary-period > summary > i {
  color: var(--today-green);
  font-size: 22px;
  font-style: normal;
  transition: transform .2s ease;
}

.today-summary-details[open] > summary > span,
.today-summary-period[open] > summary > i {
  transform: rotate(90deg);
}

.today-summary-details-body {
  display: grid;
  padding: 5px 0 10px;
  gap: 9px;
  color: var(--today-muted);
  font-size: 13px;
  line-height: 1.5;
}

.today-summary-details-body p,
.today-summary-details-body ul {
  margin: 0;
}

.today-summary-details-body ul {
  display: flex;
  padding: 0;
  flex-wrap: wrap;
  gap: 4px 12px;
  list-style: none;
}

.today-summary-details-body li::before {
  margin-right: 5px;
  color: var(--today-gold);
  content: "·";
}

.today-summary-method {
  padding-top: 7px;
  border-top: 1px solid var(--today-line);
}

.today-summary-periods {
  display: grid;
}

.today-summary-period {
  margin: 0;
  border-top: 1px solid rgb(34 47 42 / 8%);
}

.today-summary-period:first-child {
  border-top: 0;
}

.today-summary-period > summary,
.today-summary-period.is-unavailable {
  display: grid;
  min-height: 36px;
  grid-template-columns: minmax(116px, .55fr) minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
}

.today-summary-period.is-unavailable {
  color: var(--today-muted);
}

.today-summary-period b {
  font-size: 14.5px;
  font-weight: 600;
}

.today-period-path {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: var(--today-muted);
  font-size: 15px;
  font-weight: 580;
  white-space: nowrap;
}

.today-period-path i {
  color: #8b9591;
  font-style: normal;
}

.today-period-path [data-graha="Su"] { color: #b45700; }
.today-period-path [data-graha="Mo"] { color: #395e70; }
.today-period-path [data-graha="Ma"] { color: #bd3e34; }
.today-period-path [data-graha="Me"] { color: #0b7c4b; }
.today-period-path [data-graha="Ju"] { color: #b35308; }
.today-period-path [data-graha="Ve"] { color: #7d3fb2; }
.today-period-path [data-graha="Sa"] { color: #245bb1; }
.today-period-path [data-graha="Ra"] { color: #734430; }
.today-period-path [data-graha="Ke"] { color: #202321; }

.today-summary-period dl {
  display: grid;
  margin: 0;
  padding: 3px 0 10px 126px;
  gap: 4px;
}

.today-summary-period dl > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  color: var(--today-muted);
  font-size: 13px;
}

.today-summary-period dd {
  margin: 0;
}

.today-summary-empty,
.today-summary-loading {
  margin: 0;
  color: var(--today-muted);
  font-size: 14px;
}

.today-summary-empty .today-chart-picker {
  max-width: 340px;
  margin-top: 8px;
}

.today-panchanga-link {
  display: inline-flex;
  width: fit-content;
  min-height: 36px;
  margin-top: 2px;
  align-items: center;
  gap: 8px;
  color: var(--today-green);
  font-size: 14px;
  font-weight: 720;
  text-decoration: none;
}

.today-panchanga-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.today-day-points,
.today-recommendations {
  margin-top: 16px;
  padding: clamp(20px, 2vw, 28px);
}

.today-day-points {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 37%, rgb(211 160 74 / 12%) 0 3%, transparent 20%),
    linear-gradient(180deg, rgb(230 241 237 / 72%) 0%, rgb(250 242 223 / 48%) 58%, var(--today-paper) 100%);
}

.today-day-points > header,
.today-day-points-list {
  position: relative;
  z-index: 2;
}

.today-day-points > header,
.today-recommendations > header {
  display: grid;
  justify-content: start;
  gap: 3px;
}

.today-day-points h2,
.today-recommendations h2 {
  margin: 0;
  font-family: var(--vs-account-serif, Literata, Georgia, serif);
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 540;
  line-height: 1.12;
}

.today-solar-path {
  position: relative;
  z-index: 1;
  height: clamp(82px, 8vw, 112px);
  margin: 8px 0 -12px;
  overflow: hidden;
}

.today-solar-path::before {
  position: absolute;
  right: 5%;
  bottom: -78%;
  left: 5%;
  height: 150%;
  border: 1px solid rgb(176 128 52 / 34%);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: 0 -12px 34px rgb(201 146 59 / 5%);
  content: "";
}

.today-solar-path::after {
  position: absolute;
  right: 4%;
  bottom: 7px;
  left: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(20 91 82 / 20%) 12%, rgb(20 91 82 / 20%) 88%, transparent);
  content: "";
}

.today-solar-endpoint {
  position: absolute;
  z-index: 2;
  bottom: 3px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--today-paper);
  border-radius: 50%;
  background: var(--today-gold);
  box-shadow: 0 0 0 1px rgb(176 128 52 / 38%);
}

.today-solar-endpoint.is-sunrise { left: calc(5% - 4px); }
.today-solar-endpoint.is-sunset { right: calc(5% - 4px); }

.today-solar-zenith {
  position: absolute;
  z-index: 2;
  top: 1px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 1px;
  color: var(--today-green);
  transform: translateX(-50%);
}

.today-solar-zenith::before {
  width: 11px;
  height: 11px;
  margin-bottom: 3px;
  border: 2px solid rgb(255 253 248 / 92%);
  border-radius: 50%;
  background: var(--today-gold);
  box-shadow: 0 0 0 1px rgb(176 128 52 / 44%), 0 0 24px rgb(201 146 59 / 32%);
  content: "";
}

.today-solar-zenith small {
  color: var(--today-muted);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
}

.today-solar-zenith time {
  font-size: 13px;
  font-weight: 720;
}

.today-day-points-list {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.today-day-points-list li {
  display: grid;
  min-height: 76px;
  padding: 9px 20px;
  align-content: center;
  gap: 6px;
  border: 0;
  border-left: 1px solid var(--today-line);
  border-radius: 0;
  background: transparent;
}

.today-day-points-list li:first-child {
  border-left: 0;
}

.today-day-points-list li[data-rhythm="rahu"] {
  color: #8a5b1f;
}

.today-day-points-list li[data-rhythm="abhijit"] {
  color: var(--today-green);
}

.today-day-points-list li[data-rhythm="now"] {
  background: var(--today-paper-muted);
  box-shadow: inset 0 2px 0 var(--today-gold);
}

.today-day-points-list span {
  color: var(--today-muted);
  font-size: 13px;
  font-weight: 690;
}

.today-day-points-list time {
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 720;
  white-space: nowrap;
}

.today-theme-text {
  max-width: 105ch;
  margin: 18px 0 0;
  color: var(--today-ink);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.62;
}

.today-theme-columns {
  display: grid;
  margin-top: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 72px);
}

.today-theme-columns h3 {
  margin: 0 0 9px;
  color: var(--today-green);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.today-theme-columns ul {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 5px 0;
  list-style: none;
}

.today-theme-columns li {
  color: var(--today-muted);
  font-size: 15px;
  line-height: 1.5;
}

.today-theme-columns li:not(:last-child)::after {
  margin: 0 9px;
  color: var(--today-gold);
  content: "·";
}

.today-dashboard.is-loading .today-dashboard-primary {
  min-height: 470px;
}

.today-dashboard.is-loading .today-summary > span {
  width: 100%;
  min-height: 48px;
  border-radius: 0;
}

.today-dashboard :where(button, input, select, summary, a):focus-visible {
  outline: 2px solid var(--today-green);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .today-dashboard-primary {
    height: 620px;
    grid-template-columns: minmax(340px, 1fr) minmax(360px, 1fr);
  }

  .today-summary {
    padding-inline: 18px;
  }

  .today-summary > h2 {
    font-size: 32px;
  }

  .today-summary-row {
    padding-block: 6px;
  }

  .today-summary-row strong {
    font-size: 17px;
  }

  .today-summary-period > summary,
  .today-summary-period.is-unavailable {
    min-height: 34px;
  }
}

@media (max-width: 860px) {
  .today-dashboard-primary {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .today-dashboard-primary > .today-context-card,
  .today-dashboard-primary > .today-transit {
    grid-column: 1;
    grid-row: auto;
  }

  .today-dashboard-primary > .today-context-card {
    width: min(100%, 620px);
    justify-self: center;
  }

  .today-dashboard-primary > .today-transit {
    width: min(100%, 620px);
    height: auto;
    min-height: 0;
    justify-self: center;
  }

  .today-transit-slot {
    aspect-ratio: 1 / 1;
  }

  .today-dashboard-primary > .today-summary-general,
  .today-dashboard-primary > .today-summary-personal {
    grid-column: 1;
    grid-row: auto;
    height: auto;
    overflow: visible;
  }
}

@media (max-width: 600px) {
  .today-dashboard {
    padding: 10px 10px 88px;
  }

  .today-dashboard-header {
    min-height: 150px;
    padding: 18px;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .today-dashboard-title h1 {
    font-size: clamp(34px, 10vw, 43px);
  }

  .today-hero-facts {
    font-size: 15px;
  }

  .today-orbit {
    display: none;
  }

  .today-orbit-path {
    inset: 7px;
  }

  .today-orbit-sun {
    width: 24px;
    height: 24px;
  }

  .today-orbit-moon {
    width: 15px;
    height: 15px;
    transform: translate(-50%, -50%) rotate(var(--moon-angle)) translateX(30px) rotate(calc(-1 * var(--moon-angle)));
  }

  .today-orbit > div {
    display: none;
  }

  .today-dashboard-primary {
    gap: 10px;
    margin-bottom: 10px;
  }

  .today-context-card,
  .today-transit.workspace-widget,
  .today-summary,
  .today-day-points,
  .today-recommendations {
    border-radius: 13px;
  }

  .today-context-card {
    min-height: 0;
    padding: 15px;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .today-context-heading h2 {
    font-size: 19px;
  }

  .today-context-selector > p {
    font-size: 12.5px;
  }

  .today-context-card .today-chart-picker-popover {
    position: fixed;
    z-index: 1200;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: min(76vh, 640px);
    padding: 14px 14px max(18px, env(safe-area-inset-bottom));
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 0 0 100vmax rgb(11 26 22 / 42%), 0 -18px 50px rgb(11 26 22 / 18%);
  }

  .today-context-card .today-chart-picker-options {
    max-height: min(56vh, 460px);
  }

  .today-transit-slot {
    padding: 10px;
  }

  .today-summary {
    padding-inline: 15px;
  }

  .today-summary > h2 {
    font-size: 32px;
  }

  .today-summary-row {
    padding-left: 19px;
  }

  .today-summary-marker {
    left: 1px;
  }

  .today-summary-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .today-summary-pair strong + strong {
    padding: 0;
    border-left: 0;
  }

  .today-summary-period > summary,
  .today-summary-period.is-unavailable {
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 3px;
  }

  .today-summary-period > summary > b,
  .today-summary-period.is-unavailable > b {
    grid-column: 1;
  }

  .today-summary-period > summary > i {
    grid-row: 1 / span 2;
    grid-column: 2;
  }

  .today-period-path,
  .today-summary-period.is-unavailable > span {
    grid-column: 1;
  }

  .today-summary-period dl {
    padding-left: 0;
  }

  .today-day-points,
  .today-recommendations {
    margin-top: 10px;
    padding: 18px 15px;
  }

  .today-day-points-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(142px, 62vw);
    grid-template-columns: none;
    margin-inline: -15px;
    padding-inline: 15px;
  }

  .today-day-points-list li {
    padding-inline: 15px;
  }

  .today-theme-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .today-summary-details > summary > span,
  .today-summary-period > summary > i {
    transition: none;
  }
}

/* Today editorial v5 — one paper surface beside the transit chart. */
.today-dashboard-primary {
  height: 780px;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
}

.today-dashboard-primary > .today-transit {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

.today-dashboard-primary > .today-editorial-surface {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

.today-editorial-surface {
  box-sizing: border-box;
  display: grid;
  min-width: 0;
  padding: 24px;
  grid-template-rows: auto auto auto;
  align-content: start;
  overflow: auto;
  border: 1px solid var(--today-line);
  border-radius: 17px;
  background: var(--today-paper);
  box-shadow: 0 1px 2px rgb(20 28 24 / 2%), 0 10px 30px rgb(20 28 24 / 3.5%);
  scrollbar-width: thin;
}

.today-editorial-context {
  display: grid;
  min-width: 0;
  padding: 0 0 18px;
  grid-template-columns: minmax(120px, 1fr) minmax(240px, 320px);
  align-items: start;
  gap: 20px;
}

.today-context-heading {
  display: grid;
  padding-top: 12px;
  gap: 2px;
}

.today-context-selector {
  display: grid;
  width: min(100%, 320px);
  min-width: 0;
  justify-self: end;
  gap: 3px;
}

.today-editorial-surface .today-summary-label,
.today-editorial-context .today-section-eyebrow {
  font-weight: 600;
}

.today-editorial-context .today-chart-picker {
  width: 100%;
}

.today-editorial-context .today-chart-picker-trigger {
  min-height: 42px;
  border-color: rgb(23 105 95 / 30%);
  background: #fffdfa;
  font-size: 16px;
  font-weight: 580;
}

.today-editorial-context .today-chart-picker-trigger svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.today-transit-slot {
  padding: clamp(6px, .8vw, 10px);
}

.today-editorial-general,
.today-editorial-personal {
  display: grid;
  min-width: 0;
  align-content: start;
}

.today-editorial-general > h2 {
  margin: 0;
  padding: 0 0 10px;
  font-family: var(--vs-account-serif, Literata, Georgia, serif);
  font-size: clamp(34px, 2.6vw, 40px);
  font-weight: 600;
  line-height: 1.08;
}

.today-summary-row {
  position: static;
  padding: 14px 0;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--today-line);
}

.today-summary-row > div {
  gap: 4px;
}

.today-summary-row strong {
  font-size: clamp(17px, 1.25vw, 19px);
  font-weight: 570;
  line-height: 1.25;
}

.today-editorial-personal {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgb(34 47 42 / 13%);
}

.today-personal-summary-row {
  padding: 0 0 14px;
  gap: 5px;
  border-top: 0;
}

.today-personal-summary-row + .today-personal-summary-row {
  padding: 14px 0 0;
  border-top: 1px solid var(--today-line);
}

.today-personal-summary-row .today-summary-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
}

.today-summary-details > summary,
.today-personal-summary-row.is-tara .today-summary-details > summary {
  min-height: 40px;
}

.today-personal-summary-row.is-tara .today-summary-details > summary strong {
  font-size: 18px;
  font-weight: 560;
}

.today-summary-period > summary,
.today-summary-period.is-unavailable {
  min-height: 42px;
  grid-template-columns: minmax(150px, 170px) minmax(0, 1fr) 24px;
}

.today-summary-period.is-unavailable {
  grid-template-columns: minmax(150px, 170px) minmax(0, 1fr);
}

.today-summary-period b {
  color: var(--today-ink);
  font-size: 14.5px;
  font-weight: 600;
}

.today-period-path {
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 550;
}

.today-summary-period dl {
  padding-left: 180px;
}

.today-dashboard.is-loading .today-editorial-general > span {
  width: 100%;
  min-height: 48px;
  border-radius: 0;
}

@media (max-width: 1180px) {
  .today-dashboard-primary {
    height: 720px;
    grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr);
  }

  .today-editorial-surface {
    padding: 20px 22px;
  }

  .today-editorial-context {
    padding-bottom: 18px;
    grid-template-columns: minmax(100px, .72fr) minmax(240px, 1.28fr);
    gap: 14px;
  }

  .today-editorial-general > h2 {
    padding-bottom: 10px;
    font-size: 32px;
  }

  .today-summary-row {
    padding-block: 10px;
  }

  .today-summary-row strong {
    font-size: 17px;
  }

  .today-editorial-personal {
    margin-top: 14px;
    padding-top: 14px;
  }

  .today-personal-summary-row {
    padding-bottom: 10px;
  }

  .today-personal-summary-row + .today-personal-summary-row {
    padding-top: 10px;
  }

  .today-summary-period > summary,
  .today-summary-period.is-unavailable {
    min-height: 40px;
    grid-template-columns: minmax(128px, 150px) minmax(0, 1fr) 22px;
  }

  .today-summary-period.is-unavailable {
    grid-template-columns: minmax(128px, 150px) minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .today-dashboard-primary {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .today-dashboard-primary > .today-transit,
  .today-dashboard-primary > .today-editorial-surface {
    grid-column: 1;
    grid-row: auto;
    height: auto;
  }

  .today-dashboard-primary > .today-transit {
    width: min(100%, 640px);
    justify-self: center;
  }

  .today-transit-slot {
    aspect-ratio: 1 / 1;
  }

  .today-editorial-surface {
    width: 100%;
    overflow: visible;
  }
}

@media (max-width: 600px) {
  .today-editorial-surface {
    padding: 18px 15px;
    border-radius: 13px;
  }

  .today-editorial-context {
    padding-bottom: 24px;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .today-context-heading {
    padding-top: 0;
  }

  .today-editorial-context .today-chart-picker {
    width: 100%;
    max-width: none;
  }

  .today-context-selector {
    width: 100%;
    justify-self: stretch;
  }

  .today-editorial-context .today-chart-picker-popover {
    position: fixed;
    z-index: 1200;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: min(76vh, 640px);
    padding: 14px 14px max(18px, env(safe-area-inset-bottom));
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 0 0 100vmax rgb(11 26 22 / 42%), 0 -18px 50px rgb(11 26 22 / 18%);
  }

  .today-editorial-context .today-chart-picker-options {
    max-height: min(56vh, 460px);
  }

  .today-editorial-general > h2 {
    padding-bottom: 11px;
    font-size: clamp(28px, 8vw, 32px);
  }

  .today-summary-row {
    padding: 14px 0;
  }

  .today-summary-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .today-summary-pair strong + strong {
    padding: 0;
    border-left: 0;
  }

  .today-editorial-personal {
    margin-top: 20px;
    padding-top: 20px;
  }

  .today-summary-period > summary,
  .today-summary-period.is-unavailable {
    min-height: 44px;
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 3px;
  }

  .today-summary-period.is-unavailable {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-summary-period > summary > b,
  .today-summary-period.is-unavailable > b {
    grid-column: 1;
  }

  .today-summary-period > summary > i {
    grid-row: 1 / span 2;
    grid-column: 2;
  }

  .today-period-path,
  .today-summary-period.is-unavailable > span {
    grid-column: 1;
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
  }

  .today-summary-period dl {
    padding-left: 0;
  }
}

/* Knowledge v2 — editorial learning library. */
[data-knowledge-view-root] {
  width: 100%;
  min-width: 0;
}

.knowledge-page-v2 {
  --knowledge-canvas: var(--vs-account-bg, #f0eee8);
  --knowledge-paper: var(--vs-account-surface, #fbf9f4);
  --knowledge-paper-soft: #f6f3ec;
  --knowledge-ink: var(--vs-account-ink, #162721);
  --knowledge-muted: var(--vs-account-muted, #66716d);
  --knowledge-line: var(--vs-account-line, rgba(31, 47, 41, .13));
  --knowledge-teal: var(--vs-account-teal, #176b63);
  --knowledge-gold: var(--vs-account-gold, #c9964b);
  width: min(100%, 1500px);
  max-width: 1500px !important;
  min-width: 0;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 38px) clamp(20px, 3vw, 36px) 64px !important;
  overflow: clip;
  color: var(--knowledge-ink);
  font-family: Inter, system-ui, sans-serif;
}

.knowledge-page-v2 *,
.knowledge-page-v2 *::before,
.knowledge-page-v2 *::after {
  box-sizing: border-box;
}

.knowledge-page-v2 button,
.knowledge-page-v2 select,
.knowledge-page-v2 summary {
  font: inherit;
}

.knowledge-page-v2 button {
  color: inherit;
}

.knowledge-page-v2 h1,
.knowledge-page-v2 h2,
.knowledge-page-v2 h3 {
  margin: 0;
  color: var(--knowledge-ink);
  font-family: Literata, Georgia, serif;
  font-weight: 560;
  letter-spacing: -.025em;
}

.knowledge-page-v2 p {
  margin: 0;
}

.knowledge-header-area {
  display: grid;
  grid-template-areas:
    "hero search"
    "tabs tabs";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 32px;
  padding-bottom: 2px;
}

.knowledge-hero {
  grid-area: hero;
  display: block;
  max-width: 850px;
}

.knowledge-kicker,
.knowledge-section-heading > div > p,
.knowledge-progress-card > div > p,
.knowledge-classic-card > p,
.knowledge-reference-current > p,
.knowledge-material-row > p,
.knowledge-research-card > p {
  color: var(--knowledge-teal);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.25;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.knowledge-hero h1 {
  margin-top: 8px;
  font-size: clamp(42px, 4.1vw, 54px);
  line-height: .98;
}

.knowledge-hero-deck {
  max-width: 820px;
  margin-top: 18px !important;
  color: var(--knowledge-ink);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.55;
}

.knowledge-hero-note {
  margin-top: 6px !important;
  color: var(--knowledge-muted);
  font-size: 14px;
  line-height: 1.5;
}

.knowledge-search-shortcut {
  grid-area: search;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--knowledge-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--knowledge-paper) 82%, transparent);
  color: var(--knowledge-muted) !important;
  cursor: pointer;
}

.knowledge-search-shortcut:hover {
  border-color: color-mix(in srgb, var(--knowledge-teal) 40%, var(--knowledge-line));
  color: var(--knowledge-teal) !important;
}

.knowledge-search-shortcut > span:first-child {
  font-size: 22px;
  line-height: 1;
}

.knowledge-page-tabs {
  grid-area: tabs;
  display: flex;
  gap: clamp(20px, 3vw, 38px);
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--knowledge-line);
  scrollbar-width: none;
}

.knowledge-page-tabs::-webkit-scrollbar {
  display: none;
}

.knowledge-page-v2 .knowledge-page-tabs button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 5px 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--knowledge-muted);
  font-size: 16px;
  font-weight: 570;
  cursor: pointer;
}

.knowledge-page-v2 .knowledge-page-tabs button[aria-selected="true"] {
  border-bottom-color: var(--knowledge-gold);
  color: var(--knowledge-ink);
}

.knowledge-panel {
  min-width: 0;
}

.knowledge-panel > section,
.knowledge-editorial-link {
  margin-top: clamp(38px, 4vw, 54px);
}

.knowledge-section-heading {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(260px, 640px);
  align-items: end;
  justify-content: space-between;
  gap: 16px 36px;
  margin-bottom: clamp(18px, 2vw, 26px);
}

.knowledge-section-heading h2,
.knowledge-reference-current > h2,
.knowledge-research-toolbar h2,
.knowledge-dossier > h2,
.knowledge-policy > h2 {
  margin-top: 4px;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.12;
}

.knowledge-section-heading > p {
  color: var(--knowledge-muted);
  font-size: 15px;
  line-height: 1.55;
}

.knowledge-path-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--knowledge-line);
  border-bottom: 1px solid var(--knowledge-line);
}

.knowledge-path-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(56px, 1fr) auto;
  gap: 10px;
  min-width: 0;
  min-height: 214px;
  padding: 23px clamp(18px, 2vw, 26px);
  border: 0;
  border-right: 1px solid var(--knowledge-line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.knowledge-path-card:last-child {
  border-right: 0;
}

.knowledge-path-card:hover {
  background: color-mix(in srgb, var(--knowledge-paper) 62%, transparent);
}

.knowledge-path-number,
.knowledge-topic-index {
  color: var(--knowledge-gold);
  font-family: Literata, Georgia, serif;
  font-size: 14px;
}

.knowledge-path-card > strong {
  max-width: 230px;
  font-family: Literata, Georgia, serif;
  font-size: clamp(20px, 1.8vw, 25px);
  font-weight: 560;
  line-height: 1.18;
}

.knowledge-path-description {
  color: var(--knowledge-muted);
  font-size: 14px;
  line-height: 1.5;
}

.knowledge-path-card > small {
  padding-right: 24px;
  color: var(--knowledge-muted);
  font-size: 13px;
}

.knowledge-path-card > i,
.knowledge-topic-card > i,
.knowledge-update-row > i,
.knowledge-reference-group > i,
.knowledge-search-result > i {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: var(--knowledge-teal);
  font-style: normal;
  transition: transform 150ms ease;
}

.knowledge-path-card:hover > i,
.knowledge-topic-card:hover > i,
.knowledge-update-row:hover > i,
.knowledge-reference-group:hover > i,
.knowledge-search-result:hover > i {
  transform: translateX(2px);
}

.knowledge-topic-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.knowledge-topic-card {
  position: relative;
  grid-column: span 3;
  display: grid;
  grid-template-rows: auto auto minmax(42px, 1fr) auto;
  gap: 10px;
  min-width: 0;
  min-height: 148px;
  padding: 20px 21px;
  overflow: hidden;
  border: 1px solid var(--knowledge-line);
  border-radius: 15px;
  background: var(--knowledge-paper);
  box-shadow: 0 8px 24px rgba(22, 39, 33, .025);
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.knowledge-topic-card.is-priority {
  grid-column: span 4;
  min-height: 196px;
  padding: 25px 26px;
}

.knowledge-topic-card:hover {
  border-color: color-mix(in srgb, var(--knowledge-teal) 34%, var(--knowledge-line));
  box-shadow: 0 10px 28px rgba(22, 39, 33, .055);
  transform: translateY(-1px);
}

.knowledge-topic-card > strong {
  max-width: 90%;
  font-family: Literata, Georgia, serif;
  font-size: 20px;
  font-weight: 560;
  line-height: 1.18;
}

.knowledge-topic-card.is-priority > strong {
  font-size: clamp(23px, 2vw, 28px);
}

.knowledge-topic-card > span:not(.knowledge-topic-index) {
  color: var(--knowledge-muted);
  font-size: 14px;
  line-height: 1.48;
}

.knowledge-topic-card > small {
  padding-right: 24px;
  color: var(--knowledge-teal);
  font-size: 13px;
}

.knowledge-progress-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding: clamp(22px, 2.8vw, 34px);
  border: 1px solid var(--knowledge-line);
  border-radius: 16px;
  background: var(--knowledge-paper-soft);
}

.knowledge-progress-card h3 {
  max-width: 840px;
  margin-top: 8px;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.2;
}

.knowledge-progress-card > div > span,
.knowledge-progress-card > div > small {
  display: block;
  margin-top: 7px;
  color: var(--knowledge-muted);
  font-size: 13px;
}

.knowledge-progress-line {
  width: min(100%, 620px);
  height: 3px;
  margin-top: 18px;
  overflow: hidden;
  background: color-mix(in srgb, var(--knowledge-line) 72%, transparent);
}

.knowledge-progress-line > i {
  display: block;
  height: 100%;
  background: var(--knowledge-teal);
}

.knowledge-progress-card > button,
.knowledge-classic-card > button,
.knowledge-research-card footer > button,
.knowledge-research-toolbar > button {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid color-mix(in srgb, var(--knowledge-teal) 40%, var(--knowledge-line));
  border-radius: 9px;
  background: transparent;
  color: var(--knowledge-teal);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.knowledge-update-list {
  border-top: 1px solid var(--knowledge-line);
}

.knowledge-update-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(110px, .55fr) minmax(220px, 1.2fr) minmax(280px, 2fr) minmax(130px, .7fr) 18px;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 88px;
  padding: 15px 2px;
  border: 0;
  border-bottom: 1px solid var(--knowledge-line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.knowledge-update-row > span {
  color: var(--knowledge-teal);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.knowledge-update-row > strong {
  font-family: Literata, Georgia, serif;
  font-size: 18px;
  font-weight: 560;
  line-height: 1.3;
}

.knowledge-update-row > small,
.knowledge-update-row > time {
  color: var(--knowledge-muted);
  font-size: 13px;
  line-height: 1.45;
}

.knowledge-update-row > i {
  position: static;
}

.knowledge-editorial-link {
  padding-top: 22px;
  border-top: 1px solid var(--knowledge-line);
}

.knowledge-editorial-link button,
.knowledge-back-link {
  min-height: 42px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--knowledge-teal) !important;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.knowledge-editorial-link button > span {
  display: inline-block;
  margin-left: 7px;
}

.knowledge-search-results > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--knowledge-line);
}

.knowledge-search-result {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 132px;
  padding: 20px 46px 20px 0;
  border: 0;
  border-right: 1px solid var(--knowledge-line);
  border-bottom: 1px solid var(--knowledge-line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.knowledge-search-result:nth-child(2n) {
  padding-left: 22px;
  border-right: 0;
}

.knowledge-search-result > span {
  color: var(--knowledge-teal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.knowledge-search-result > strong {
  font-family: Literata, Georgia, serif;
  font-size: 19px;
  font-weight: 560;
}

.knowledge-search-result > small {
  color: var(--knowledge-muted);
  font-size: 13px;
  line-height: 1.45;
}

.knowledge-reference-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  padding-bottom: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.knowledge-reference-tabs::-webkit-scrollbar {
  display: none;
}

.knowledge-reference-tabs > button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 7px 11px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--knowledge-muted);
  font-size: 14px;
  cursor: pointer;
}

.knowledge-reference-tabs > button[aria-current="true"] {
  border-bottom-color: var(--knowledge-gold);
  color: var(--knowledge-ink);
}

.knowledge-filter-shell {
  margin: 0 0 28px;
}

.knowledge-filter-shell > summary {
  display: none;
}

.knowledge-filter-shell:not([open]) > .knowledge-reference-filters {
  display: grid;
}

.knowledge-reference-filters {
  grid-template-columns: repeat(3, minmax(170px, 220px)) auto;
  align-items: end;
  gap: 8px;
}

.knowledge-reference-filters label {
  display: grid;
  gap: 5px;
  color: var(--knowledge-muted);
  font-size: 12px;
}

.knowledge-reference-filters select {
  min-height: 42px;
  padding: 8px 34px 8px 10px;
  border: 1px solid var(--knowledge-line);
  border-radius: 8px;
  background: var(--knowledge-paper);
  color: var(--knowledge-ink);
  font-size: 14px;
}

.knowledge-reference-filters > button {
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--knowledge-muted);
  font-size: 13px;
  cursor: pointer;
}

.knowledge-reference-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--knowledge-line);
}

.knowledge-reference-group {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 148px;
  padding: 22px 46px 22px 0;
  border: 0;
  border-right: 1px solid var(--knowledge-line);
  border-bottom: 1px solid var(--knowledge-line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.knowledge-reference-group:nth-child(2n) {
  padding-left: 24px;
  border-right: 0;
}

.knowledge-reference-group > strong {
  font-family: Literata, Georgia, serif;
  font-size: 22px;
  font-weight: 560;
}

.knowledge-reference-group > span,
.knowledge-reference-group > small {
  color: var(--knowledge-muted);
  font-size: 13px;
  line-height: 1.45;
}

.knowledge-reference-current {
  padding: 24px 0;
  border-top: 1px solid var(--knowledge-line);
}

.knowledge-reference-current > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: 20px;
}

.knowledge-reference-current > div > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--knowledge-line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.knowledge-reference-current > div > button > span {
  color: var(--knowledge-teal);
}

.knowledge-material-list {
  margin-top: 28px;
  border-top: 1px solid var(--knowledge-line);
}

.knowledge-material-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, .65fr) minmax(220px, 1.35fr) minmax(260px, 1.7fr);
  gap: 10px 22px;
  padding: 20px 0;
  border-bottom: 1px solid var(--knowledge-line);
}

.knowledge-material-row > p {
  grid-row: 1 / span 2;
}

.knowledge-material-row > h3 {
  font-size: 19px;
  line-height: 1.3;
}

.knowledge-material-row > span {
  color: var(--knowledge-muted);
  font-size: 14px;
  line-height: 1.48;
}

.knowledge-material-row > footer {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.knowledge-material-row footer > small,
.knowledge-material-row footer > em {
  color: var(--knowledge-muted);
  font-size: 13px;
  font-style: normal;
}

.knowledge-material-row footer > em {
  color: var(--knowledge-teal);
}

.knowledge-material-row footer > button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--knowledge-teal);
  cursor: pointer;
}

.knowledge-classic-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.knowledge-classic-card {
  display: grid;
  gap: 9px;
  min-height: 250px;
  padding: 25px;
  border: 1px solid var(--knowledge-line);
  border-radius: 15px;
  background: var(--knowledge-paper);
}

.knowledge-classic-card h3 {
  margin-top: 4px;
  font-size: 23px;
}

.knowledge-classic-card > i,
.knowledge-dossier-original {
  color: var(--knowledge-teal);
  font-family: Literata, Georgia, serif;
  font-size: 15px;
}

.knowledge-classic-card > span,
.knowledge-classic-card > small {
  color: var(--knowledge-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
}

.knowledge-classic-card > button {
  align-self: end;
  justify-self: start;
  margin-top: auto;
}

.knowledge-dossier,
.knowledge-policy {
  margin-top: 36px;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--knowledge-line);
  border-radius: 16px;
  background: var(--knowledge-paper);
}

.knowledge-dossier > .knowledge-kicker,
.knowledge-policy > .knowledge-kicker {
  margin-top: 26px;
}

.knowledge-dossier-original {
  margin-top: 10px !important;
}

.knowledge-dossier-deck,
.knowledge-policy > p {
  max-width: 840px;
  margin-top: 16px !important;
  color: var(--knowledge-muted);
  font-size: 15px;
  line-height: 1.6;
}

.knowledge-publication-metadata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 28px 0 0;
  border-top: 1px solid var(--knowledge-line);
}

.knowledge-publication-metadata > div {
  display: grid;
  grid-template-columns: minmax(135px, .6fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--knowledge-line);
}

.knowledge-publication-metadata > div:nth-child(odd) {
  padding-right: 22px;
}

.knowledge-publication-metadata > div:nth-child(even) {
  padding-left: 22px;
  border-left: 1px solid var(--knowledge-line);
}

.knowledge-publication-metadata dt {
  color: var(--knowledge-muted);
  font-size: 12px;
}

.knowledge-publication-metadata dd {
  margin: 0;
  font-size: 13px;
}

.knowledge-rights-note {
  margin-top: 20px !important;
  color: var(--knowledge-muted);
  font-size: 13px;
  line-height: 1.5;
}

.knowledge-research-areas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--knowledge-line);
  border-bottom: 1px solid var(--knowledge-line);
}

.knowledge-research-area {
  min-height: 180px;
  padding: 20px;
  border-right: 1px solid var(--knowledge-line);
}

.knowledge-research-area:last-child {
  border-right: 0;
}

.knowledge-research-area > span {
  color: var(--knowledge-gold);
  font-family: Literata, Georgia, serif;
  font-size: 13px;
}

.knowledge-research-area > h3 {
  margin-top: 24px;
  font-size: 19px;
}

.knowledge-research-area > p {
  margin-top: 8px;
  color: var(--knowledge-muted);
  font-size: 13px;
  line-height: 1.5;
}

.knowledge-research-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 38px;
}

.knowledge-research-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.knowledge-research-card {
  display: grid;
  gap: 10px;
  min-height: 260px;
  padding: 24px;
  border: 1px solid var(--knowledge-line);
  border-radius: 15px;
  background: var(--knowledge-paper);
}

.knowledge-research-card > h3 {
  font-size: 22px;
  line-height: 1.25;
}

.knowledge-research-card > span {
  color: var(--knowledge-muted);
  font-size: 14px;
  line-height: 1.5;
}

.knowledge-research-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: auto;
  color: var(--knowledge-muted);
}

.knowledge-research-card > div > small {
  font-size: 13px;
}

.knowledge-research-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--knowledge-line);
}

.knowledge-research-card footer > em {
  color: var(--knowledge-teal);
  font-size: 13px;
  font-style: normal;
}

.knowledge-research-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--knowledge-line);
}

.knowledge-research-links > button {
  min-height: 40px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--knowledge-teal);
  cursor: pointer;
}

.knowledge-policy-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.knowledge-policy-columns > section {
  padding: 22px;
  border: 1px solid var(--knowledge-line);
  border-radius: 12px;
  background: var(--knowledge-paper-soft);
}

.knowledge-policy-columns h3 {
  font-size: 19px;
}

.knowledge-policy-columns ul {
  margin: 14px 0 0;
  padding-left: 18px;
}

.knowledge-policy-columns li,
.knowledge-policy-columns p {
  margin-top: 8px;
  color: var(--knowledge-muted);
  font-size: 13px;
  line-height: 1.5;
}

.knowledge-policy-columns li > strong,
.knowledge-policy-columns li > span {
  display: block;
}

.knowledge-empty {
  padding: 26px 0;
  color: var(--knowledge-muted);
  font-size: 14px;
}

@media (max-width: 1180px) {
  .knowledge-page-v2 {
    padding-inline: 24px !important;
  }

  .knowledge-header-area {
    grid-template-areas:
      "hero"
      "search"
      "tabs";
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-search-shortcut {
    justify-self: start;
  }

  .knowledge-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledge-path-card:nth-child(2) {
    border-right: 0;
  }

  .knowledge-path-card:nth-child(-n+2) {
    border-bottom: 1px solid var(--knowledge-line);
  }

  .knowledge-topic-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .knowledge-topic-card,
  .knowledge-topic-card.is-priority {
    grid-column: span 3;
  }

  .knowledge-update-row {
    grid-template-columns: 105px minmax(190px, .9fr) minmax(230px, 1.4fr) 120px 18px;
  }

  .knowledge-research-areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledge-research-area {
    border-bottom: 1px solid var(--knowledge-line);
  }

  .knowledge-research-area:nth-child(2n) {
    border-right: 0;
  }

  .knowledge-material-row {
    grid-template-columns: 130px minmax(190px, 1fr) minmax(220px, 1.3fr);
  }
}

@media (max-width: 760px) {
  .knowledge-page-v2 {
    width: 100%;
    padding: 20px 14px 88px !important;
    overflow: hidden;
  }

  .knowledge-header-area {
    grid-template-areas:
      "hero"
      "tabs"
      "search";
    gap: 14px;
  }

  .knowledge-hero h1 {
    font-size: clamp(30px, 9vw, 36px);
  }

  .knowledge-hero-deck {
    margin-top: 13px !important;
    font-size: 16px;
  }

  .knowledge-hero-note {
    font-size: 13px;
  }

  .knowledge-search-shortcut {
    width: 100%;
    justify-content: flex-start;
  }

  .knowledge-page-tabs {
    gap: 24px;
    margin-inline: -14px;
    padding-inline: 14px;
  }

  .knowledge-page-v2 .knowledge-page-tabs button {
    min-height: 44px;
    font-size: 15px;
  }

  .knowledge-panel > section,
  .knowledge-editorial-link {
    margin-top: 36px;
  }

  .knowledge-section-heading {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }

  .knowledge-section-heading h2,
  .knowledge-reference-current > h2,
  .knowledge-research-toolbar h2,
  .knowledge-dossier > h2,
  .knowledge-policy > h2 {
    font-size: clamp(26px, 8vw, 32px);
  }

  .knowledge-section-heading > p {
    font-size: 14px;
  }

  .knowledge-path-grid,
  .knowledge-topic-grid,
  .knowledge-search-results > div,
  .knowledge-reference-index,
  .knowledge-classic-list,
  .knowledge-research-list,
  .knowledge-policy-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-path-card {
    min-height: 180px;
    border-right: 0;
    border-bottom: 1px solid var(--knowledge-line);
  }

  .knowledge-path-card:last-child {
    border-bottom: 0;
  }

  .knowledge-topic-card,
  .knowledge-topic-card.is-priority {
    grid-column: auto;
    min-height: 164px;
    padding: 21px;
  }

  .knowledge-progress-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .knowledge-progress-card > button {
    justify-self: start;
  }

  .knowledge-update-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    min-height: 116px;
    padding: 16px 0;
  }

  .knowledge-update-row > span,
  .knowledge-update-row > strong,
  .knowledge-update-row > small {
    grid-column: 1;
  }

  .knowledge-update-row > time {
    grid-column: 1;
  }

  .knowledge-update-row > i {
    grid-row: 1 / span 4;
    grid-column: 2;
  }

  .knowledge-search-result,
  .knowledge-search-result:nth-child(2n),
  .knowledge-reference-group,
  .knowledge-reference-group:nth-child(2n) {
    padding: 18px 42px 18px 0;
    border-right: 0;
  }

  .knowledge-filter-shell {
    margin-bottom: 22px;
  }

  .knowledge-filter-shell > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    width: fit-content;
    padding: 8px 12px;
    border: 1px solid var(--knowledge-line);
    border-radius: 8px;
    background: var(--knowledge-paper);
    cursor: pointer;
  }

  .knowledge-filter-shell:not([open]) > .knowledge-reference-filters {
    display: none;
  }

  .knowledge-reference-filters {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--knowledge-line);
    border-radius: 12px;
    background: var(--knowledge-paper);
  }

  .knowledge-reference-current > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-material-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .knowledge-material-row > p,
  .knowledge-material-row > footer {
    grid-row: auto;
    grid-column: 1;
  }

  .knowledge-material-row > footer {
    flex-wrap: wrap;
  }

  .knowledge-publication-metadata {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-publication-metadata > div:nth-child(odd),
  .knowledge-publication-metadata > div:nth-child(even) {
    padding-inline: 0;
    border-left: 0;
  }

  .knowledge-research-areas {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-research-area {
    min-height: 142px;
    border-right: 0;
  }

  .knowledge-research-card {
    min-height: 250px;
  }

  .knowledge-research-card > footer,
  .knowledge-research-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .knowledge-dossier,
  .knowledge-policy {
    margin-inline: -2px;
    padding: 20px;
  }

  .knowledge-publication-metadata > div {
    grid-template-columns: minmax(110px, .65fr) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .knowledge-topic-card,
  .knowledge-path-card > i,
  .knowledge-topic-card > i,
  .knowledge-update-row > i,
  .knowledge-reference-group > i,
  .knowledge-search-result > i {
    transition: none;
  }
}

/* Keep the mobile global-search trigger in its own topbar column after all
   legacy responsive overrides above. The open surface itself remains fixed. */
@media (max-width: 760px) {
  .account-topbar {
    grid-template-columns: minmax(0, 1fr) 44px auto;
    gap: 6px;
  }
}

/* Today final editorial redesign — staging only. */
.today-dashboard {
  width: min(100%, 1500px);
  max-width: 1500px;
  padding: clamp(14px, 1.8vw, 28px);
}

.today-dashboard-header {
  position: relative;
  min-height: 152px;
  padding: clamp(19px, 1.5vw, 23px) clamp(22px, 3vw, 42px);
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 20px;
  isolation: isolate;
  background:
    radial-gradient(circle at 91% 18%, rgb(201 149 73 / 14%), transparent 14rem),
    linear-gradient(118deg, rgb(255 253 248 / 98%), rgb(245 242 233 / 95%));
}

.today-dashboard-header::before,
.today-dashboard-header::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgb(23 105 95 / 8%);
  border-radius: 50%;
  pointer-events: none;
  content: "";
}

.today-dashboard-header::before {
  top: -92px;
  right: 48px;
  width: 330px;
  height: 230px;
}

.today-dashboard-header::after {
  right: -42px;
  bottom: -146px;
  width: 390px;
  height: 250px;
  border-color: rgb(201 149 73 / 9%);
}

.today-orbit {
  width: 110px;
  height: 110px;
  justify-self: end;
}

.today-orbit-sun {
  width: 32px;
  height: 32px;
}

.today-orbit-moon {
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%) rotate(var(--moon-angle)) translateX(42px) rotate(calc(-1 * var(--moon-angle)));
}

.today-dashboard-title {
  max-width: none;
  gap: 4px;
}

.today-dashboard-title h1 {
  width: fit-content;
  max-width: 100%;
  font-size: clamp(36px, 3.7vw, 52px);
}

.today-hero-facts {
  margin-top: 2px;
  font-size: clamp(14.5px, 1.25vw, 18px);
  line-height: 1.4;
}

@media (min-width: 721px) {
  .today-dashboard-title h1,
  .today-hero-facts {
    white-space: nowrap;
  }
}

.today-dashboard-primary {
  display: grid;
  height: auto;
  min-height: 0;
  margin-bottom: 16px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
}

.today-dashboard-primary > .today-transit,
.today-dashboard-primary > .today-panchanga-column,
.today-dashboard-primary > .today-personal-column {
  min-width: 0;
  height: 100%;
  grid-row: 1;
}

.today-dashboard-primary > .today-transit {
  width: auto;
  grid-column: 1;
}

.today-dashboard-primary > .today-panchanga-column {
  grid-column: 2;
}

.today-dashboard-primary > .today-personal-column {
  grid-column: 3;
}

.today-transit.workspace-widget,
.today-panchanga-column,
.today-personal-column,
.today-qualities,
.today-day-points,
.today-recommendations,
.today-cta {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--today-line);
  border-radius: 16px;
  background: var(--today-paper);
  box-shadow: 0 1px 2px rgb(20 28 24 / 2%), 0 10px 30px rgb(20 28 24 / 3.5%);
}

.today-transit.workspace-widget {
  grid-template-rows: 48px minmax(0, 1fr);
  overflow: hidden;
}

.today-transit-slot {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: clamp(8px, .9vw, 12px);
  aspect-ratio: 1 / 1;
}

.today-transit .chart-panel,
.today-transit .chart-fit-container,
.today-transit .chart-viewer {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.today-chart-widget-header {
  height: 48px;
  min-height: 48px;
}

.today-chart-widget-header .workspace-chart-header-controls {
  flex: 0 0 auto;
  gap: 3px;
  grid-template-columns: repeat(3, 36px);
}

.today-chart-widget-header .workspace-chart-header-controls > button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
}

.today-panchanga-column,
.today-personal-column {
  --today-column-label-size: 12px;
  --today-column-value-size: clamp(16px, 1.16vw, 18px);
  --today-column-subtitle-weight: 720;
  --today-column-text-weight: 500;
  --today-column-header-height: 82px;
  --today-column-row-height: 78px;
  display: grid;
  padding: clamp(19px, 1.7vw, 26px);
  align-content: start;
  overflow: visible;
}

.today-panchanga-column > header {
  display: grid;
  min-height: var(--today-column-header-height);
  padding-bottom: 12px;
  align-content: start;
  gap: 3px;
}

.today-panchanga-column h2 {
  margin: 0;
  font-family: var(--vs-account-serif, Literata, Georgia, serif);
  font-size: clamp(23px, 1.9vw, 29px);
  font-weight: 540;
  line-height: 1.13;
}

.today-summary-row {
  position: static;
  display: grid;
  min-width: 0;
  padding: 15px 0;
  min-height: var(--today-column-row-height);
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  border-top: 1px solid var(--today-line);
}

.today-summary-row strong {
  min-width: 0;
  font-size: var(--today-column-value-size);
  font-weight: var(--today-column-text-weight);
  line-height: 1.36;
}

.today-panchanga-column .today-summary-label,
.today-personal-column .today-summary-label,
.today-personal-column .today-section-eyebrow {
  font-size: var(--today-column-label-size);
  font-weight: var(--today-column-subtitle-weight);
}

.today-personal-column {
  grid-template-rows: auto auto;
}

.today-personal-column .today-editorial-context {
  display: grid;
  min-width: 0;
  padding: 0 0 15px;
  min-height: var(--today-column-header-height);
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  border-bottom: 1px solid var(--today-line);
}

.today-personal-column .today-context-heading {
  padding: 0;
}

.today-personal-column .today-context-selector {
  width: 100%;
  justify-self: stretch;
}

.today-personal-column .today-chart-picker-trigger {
  font-size: var(--today-column-value-size);
  font-weight: 560;
  line-height: 1.36;
}

.today-personal-content {
  display: grid;
  min-width: 0;
}

.today-personal-summary-row {
  padding: 15px 0;
  gap: 5px;
}

.today-personal-summary-row + .today-personal-summary-row {
  padding-top: 15px;
}

.today-personal-summary-row.is-periods {
  padding-block: 0;
  gap: 0;
}

.today-personal-summary-row.is-tara {
  min-height: calc(var(--today-column-row-height) * 2);
}

.today-personal-summary-row.is-tara .today-summary-details > summary strong {
  font-family: inherit;
  font-size: var(--today-column-value-size);
  font-weight: var(--today-column-text-weight);
  line-height: 1.36;
}

.today-tara-summary-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.today-tara-day-meaning {
  display: grid;
  margin: 0;
  gap: 3px;
  color: var(--today-muted);
  font-size: 14px;
  font-weight: var(--today-column-text-weight);
  line-height: 1.45;
}

.today-summary-period {
  display: grid;
  min-height: var(--today-column-row-height);
  padding: 15px 0;
  align-content: center;
  gap: 5px;
  border-top: 1px solid var(--today-line);
}

.today-summary-period:first-child {
  border-top: 0;
}

.today-summary-period-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.today-summary-period b {
  color: var(--today-green);
  font-size: var(--today-column-label-size);
  font-weight: var(--today-column-subtitle-weight);
  letter-spacing: .105em;
  line-height: 1.2;
  text-transform: uppercase;
}

.today-summary-period-end {
  color: var(--today-muted);
  font-size: var(--today-column-label-size);
  font-weight: 650;
  letter-spacing: .035em;
  line-height: 1.2;
}

.today-period-path {
  gap: 5px;
  flex-wrap: nowrap;
  overflow: visible;
  font-size: var(--today-column-value-size);
  font-weight: var(--today-column-text-weight);
  line-height: 1.35;
  white-space: nowrap;
}

.today-summary-period[data-today-period-system="yogini"] .today-period-path {
  flex-wrap: nowrap;
  gap: 5px;
  font-size: var(--today-column-value-size);
  font-weight: var(--today-column-text-weight);
  letter-spacing: normal;
  white-space: nowrap;
}

.today-summary-period.is-unavailable > span {
  color: var(--today-muted);
  font-size: var(--today-column-value-size);
  font-weight: var(--today-column-text-weight);
  line-height: 1.35;
}

.today-personal-column .today-summary-details-body,
.today-personal-column .today-summary-empty,
.today-personal-column .today-summary-loading {
  font-weight: var(--today-column-text-weight);
}

.today-personal-empty {
  margin: 18px 0 0;
  padding: 16px 0;
  color: var(--today-muted);
  font-size: 14px;
  line-height: 1.5;
}

.today-qualities,
.today-day-points,
.today-recommendations,
.today-cta {
  margin-top: 16px;
  padding: clamp(22px, 2.5vw, 34px);
}

.today-qualities > header,
.today-day-points > header,
.today-recommendations > header {
  display: grid;
  justify-content: start;
  gap: 3px;
}

.today-day-points > header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  width: 100%;
}

.today-qualities > header h2,
.today-day-points h2,
.today-recommendations h2,
.today-cta h2 {
  margin: 0;
  font-family: var(--vs-account-serif, Literata, Georgia, serif);
  font-size: clamp(29px, 2.55vw, 38px);
  font-weight: 540;
  line-height: 1.12;
}

.today-qualities > header > p,
.today-day-points > header > p,
.today-day-points > header > div > p {
  margin: 4px 0 0;
  color: var(--today-muted);
  font-size: 14px;
}

.today-interval-help-trigger {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--today-line) 84%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--today-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 760;
  cursor: pointer;
}

.today-interval-help-trigger:hover,
.today-interval-help-trigger:focus-visible,
.today-interval-help-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--today-accent, var(--vs-account-accent, #315d57)) 42%, var(--today-line));
  color: var(--today-ink);
  background: color-mix(in srgb, var(--today-accent, var(--vs-account-accent, #315d57)) 7%, transparent);
}

.today-interval-help-trigger:focus-visible,
.today-interval-help-panel :is(button, a):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--today-accent, var(--vs-account-accent, #315d57)) 62%, transparent);
  outline-offset: 2px;
}

.today-interval-help[hidden] {
  display: none !important;
}

.today-interval-help {
  display: block;
  grid-column: 1 / -1;
  width: min(520px, 100%);
  margin-top: 10px;
  margin-left: auto;
}

.today-interval-help-backdrop,
.today-interval-help-grabber {
  display: none;
}

.today-interval-help-panel {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--today-line);
  border-radius: 16px;
  background: var(--today-surface, #fffdf7);
  box-shadow: 0 18px 48px rgba(20, 32, 30, .12);
}

.today-interval-help-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.today-interval-help-panel :is(h3, h4, p) {
  margin: 0;
}

.today-interval-help-panel h3 {
  font-family: var(--vs-account-serif, Literata, Georgia, serif);
  font-size: 20px;
  font-weight: 640;
}

.today-interval-help-panel h4 {
  margin-bottom: 5px;
  color: var(--today-ink);
  font-size: 14px;
}

.today-interval-help-panel p {
  color: var(--today-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.today-interval-help-panel > header button {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--today-muted);
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}

.today-interval-help-note {
  padding-top: 12px;
  border-top: 1px solid var(--today-line);
}

.today-qualities-grid {
  display: grid;
  margin-top: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  border: 0;
}

.today-qualities-grid article {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.today-quality-heading {
  display: flex;
  min-height: 24px;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.today-quality-heading > span {
  color: var(--today-green);
  font-size: 11.5px;
  font-weight: 780;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.today-quality-until,
.today-quality-transition summary {
  color: var(--today-muted);
  font-size: 12.5px;
  font-weight: 560;
  white-space: nowrap;
}

.today-quality-transition summary {
  min-height: 24px;
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-decoration-color: rgb(23 105 95 / 34%);
  text-underline-offset: 3px;
}

.today-quality-transition summary::-webkit-details-marker {
  display: none;
}

.today-quality-transition p {
  margin: 5px 0 0;
  color: var(--today-green);
  font-size: 12.5px;
  line-height: 1.4;
}

.today-qualities-grid h3 {
  margin: 7px 0 8px;
  font-family: var(--vs-account-serif, Literata, Georgia, serif);
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 560;
  line-height: 1.25;
}

.today-nakshatra-facts {
  display: grid;
  margin: 12px 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  border: 0;
}

.today-nakshatra-facts > div {
  min-width: 0;
  padding: 4px 0;
  border: 0;
}

.today-nakshatra-facts dt {
  color: var(--today-green);
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: .075em;
  line-height: 1.25;
  text-transform: uppercase;
}

.today-nakshatra-facts dd {
  margin: 3px 0 0;
  color: var(--today-ink);
  font-size: 13.5px;
  font-weight: 560;
  line-height: 1.35;
}

.today-qualities-grid article > p {
  max-width: 62ch;
  margin: 0;
  color: var(--today-muted);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
}

.today-qualities.today-skeleton .today-qualities-grid {
  gap: 12px;
  border: 0;
}

.today-qualities.today-skeleton .today-qualities-grid > span {
  min-height: 150px;
  border-radius: 10px;
}

.today-day-points {
  background:
    radial-gradient(circle at 52% 34%, rgb(211 160 74 / 9%), transparent 19rem),
    linear-gradient(180deg, rgb(235 241 237 / 74%), var(--today-paper) 78%);
}

.today-rhythm-chart {
  display: grid;
  margin: 20px 3% 4px;
  grid-template-rows: auto;
}

.today-rhythm-track {
  position: relative;
  height: clamp(152px, 11vw, 186px);
  min-width: 0;
}

.today-rhythm-arc {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.today-rhythm-arc path {
  fill: none;
  stroke: url("#today-rhythm-arc-gradient");
  stroke-linecap: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.today-rhythm-range {
  position: absolute;
  z-index: 2;
  top: 70.5%;
  left: var(--range-start);
  display: block;
  width: calc(var(--range-end) - var(--range-start));
  min-width: 3px;
  height: 12px;
  border-radius: 2px;
  pointer-events: none;
}

.today-rhythm-range.is-rahu {
  border: 1px solid rgb(147 100 45 / 28%);
  background: rgb(147 100 45 / 14%);
  box-shadow: inset 0 -2px 0 #93642d;
}

.today-rhythm-range.is-abhijit {
  border: 1px solid rgb(23 105 95 / 26%);
  background: rgb(23 105 95 / 12%);
  box-shadow: inset 0 -2px 0 var(--today-green);
}

.today-rhythm-daylight {
  position: absolute;
  z-index: 0;
  top: 80.556%;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(201 149 73 / 28%), rgb(201 149 73 / 8%) 50%, rgb(201 149 73 / 28%));
}

.today-rhythm-marker {
  position: absolute;
  z-index: 3;
  top: 80.556%;
  left: var(--position);
  display: block;
  width: 14px;
  height: 14px;
  border: 3px solid var(--today-paper);
  border-radius: 50%;
  background: var(--today-gold);
  box-shadow: 0 0 0 1px rgb(159 111 48 / 42%);
  transform: translate(-50%, -50%);
}

.today-rhythm-marker > span {
  position: absolute;
  top: 22px;
  left: 50%;
  color: var(--today-muted);
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  transform: translateX(-50%);
}

.today-rhythm-marker.is-sunrise {
  transform: translate(0, -50%);
}

.today-rhythm-marker.is-sunrise > span {
  left: 0;
  transform: none;
}

.today-rhythm-marker.is-sunset {
  transform: translate(-100%, -50%);
}

.today-rhythm-marker.is-sunset > span {
  right: 0;
  left: auto;
  transform: none;
}

.today-rhythm-marker.is-zenith {
  top: 17.5%;
  background: #d5a14e;
}

.today-rhythm-marker.is-now {
  top: var(--sun-y);
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
}

.today-rhythm-marker.is-now::before {
  position: absolute;
  top: 50%;
  bottom: auto;
  left: 50%;
  width: 1px;
  height: 34px;
  background: linear-gradient(rgb(201 149 73 / 24%), transparent);
  content: "";
  transform: translate(-50%, 19px);
}

.today-rhythm-sun {
  position: absolute;
  inset: -8px;
  display: block;
  width: 60px;
  height: 60px;
  overflow: visible;
  filter: drop-shadow(0 5px 9px rgb(173 113 37 / 20%));
}

.today-rhythm-sun-rays {
  fill: none;
  stroke: #cf9847;
  stroke-linecap: round;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: today-rhythm-rays 18s linear infinite;
}

.today-rhythm-sun-halo {
  fill: rgb(243 198 104 / 26%);
  stroke: rgb(207 152 71 / 30%);
  stroke-width: 1;
}

.today-rhythm-sun-core {
  fill: #e2aa50;
  stroke: #fff7df;
  stroke-width: 2;
}

[data-today-rhythm][data-daylight-state="before-sunrise"] .today-rhythm-marker.is-now,
[data-today-rhythm][data-daylight-state="after-sunset"] .today-rhythm-marker.is-now {
  opacity: .48;
  filter: grayscale(.38);
}

@keyframes today-rhythm-rays {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .today-rhythm-sun-rays {
    animation: none;
  }
}

.today-day-points-list {
  display: grid;
  margin: 14px 0 0;
  padding: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: visible;
  border-top: 1px solid var(--today-line);
  list-style: none;
}

.today-day-points-list li {
  min-height: 76px;
  padding: 15px clamp(10px, 1.2vw, 18px);
  border-left: 1px solid var(--today-line);
  background: transparent;
  box-shadow: none;
}

.today-day-points-list li:first-child {
  border-left: 0;
}

.today-day-points-list li[data-rhythm="now"] {
  background: rgb(23 105 95 / 5%);
  box-shadow: inset 0 2px 0 var(--today-green);
}

.today-day-points-list span {
  font-size: 12.5px;
}

.today-day-points-list time {
  font-size: clamp(15px, 1.15vw, 18px);
}

.today-theme-text {
  max-width: 100ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.68;
}

.today-cta.cta-panel {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.55fr);
  align-items: center;
  gap: clamp(24px, 4vw, 54px);
  background:
    radial-gradient(circle at 92% 16%, rgb(197 148 79 / 17%), transparent 17rem),
    linear-gradient(135deg, rgb(255 252 245 / 98%), rgb(232 238 232 / 86%));
}

.today-cta::after {
  position: absolute;
  right: -70px;
  bottom: -100px;
  width: 260px;
  aspect-ratio: 1;
  border: 1px solid rgb(31 92 90 / 12%);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgb(31 92 90 / 3.5%), 0 0 0 72px rgb(197 148 79 / 5%);
  pointer-events: none;
  content: "";
}

.today-cta .cta-copy,
.today-cta .cta-content {
  position: relative;
  z-index: 1;
}

.today-cta .cta-copy > p {
  margin: 14px 0 0;
  color: var(--today-muted);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
}

.today-social-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.today-social-link {
  display: grid;
  min-width: 0;
  min-height: 96px;
  padding: 15px;
  align-items: center;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  border: 1px solid rgb(31 92 90 / 20%);
  border-radius: 13px;
  background: rgb(255 253 249 / 70%);
  color: var(--today-green);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.today-social-link:hover {
  border-color: rgb(31 92 90 / 42%);
  background: rgb(255 253 249 / 96%);
  transform: translateY(-2px);
}

.today-social-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgb(31 92 90 / 18%);
  border-radius: 10px;
  background: rgb(31 92 90 / 7%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.today-social-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.today-social-copy strong {
  font-size: 14px;
  line-height: 1.2;
}

.today-social-copy small {
  overflow: hidden;
  color: var(--today-muted);
  font-size: 11.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-social-arrow {
  color: var(--today-gold);
  font-size: 18px;
  transition: transform 160ms ease;
}

.today-social-link:hover .today-social-arrow {
  transform: translate(2px, -2px);
}

.today-bot-cta {
  display: flex;
  margin-top: 12px;
  padding: 14px 15px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgb(31 92 90 / 20%);
  border-radius: 13px;
  background: rgb(31 92 90 / 6%);
}

.today-bot-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.today-bot-copy strong {
  color: var(--today-green);
  font-size: 13px;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.today-bot-copy span {
  color: var(--today-muted);
  font-size: 12.5px;
  line-height: 1.35;
}

.today-bot-link {
  display: inline-flex;
  min-height: 46px;
  padding: 0 18px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  background: var(--today-green);
  color: #fffdf8;
  font-size: 13.5px;
  font-weight: 740;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 18px rgb(23 105 95 / 16%);
}

.today-bot-link:hover {
  background: color-mix(in srgb, var(--today-green) 88%, #000);
}

@media (max-width: 1120px) {
  .today-dashboard-primary {
    grid-template-columns: minmax(320px, 1.05fr) minmax(300px, 1fr);
    grid-template-rows: auto auto;
  }

  .today-dashboard-primary > .today-transit,
  .today-dashboard-primary > .today-panchanga-column {
    grid-row: 1;
  }

  .today-dashboard-primary > .today-personal-column {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .today-personal-column {
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
    grid-template-rows: auto;
    gap: 24px;
  }

  .today-personal-column .today-editorial-context {
    padding: 0 24px 0 0;
    align-content: start;
    border-right: 1px solid var(--today-line);
    border-bottom: 0;
  }

  .today-personal-content {
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
    gap: 22px;
  }

  .today-personal-summary-row {
    padding: 0;
  }

  .today-personal-summary-row + .today-personal-summary-row {
    padding: 0 0 0 22px;
    border-top: 0;
    border-left: 1px solid var(--today-line);
  }

  .today-personal-summary-row.is-periods {
    padding: 0 0 0 22px;
  }

  .today-day-points-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .today-day-points-list li:nth-child(4) {
    border-left: 0;
  }

  .today-cta.cta-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .today-dashboard {
    padding: 10px 10px 88px;
  }

  .today-dashboard-header {
    min-height: 0;
    padding: 19px 18px 21px;
    grid-template-columns: minmax(0, 1fr);
  }

  .today-dashboard-title h1 {
    font-size: clamp(32px, 9.5vw, 42px);
    line-height: 1.08;
    white-space: normal;
  }

  .today-hero-facts {
    max-width: 34rem;
    font-size: 14px;
    white-space: normal;
  }

  .today-orbit {
    display: none;
  }

  .today-dashboard-primary {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 10px;
  }

  .today-dashboard-primary > .today-transit,
  .today-dashboard-primary > .today-panchanga-column,
  .today-dashboard-primary > .today-personal-column {
    width: 100%;
    grid-row: auto;
    grid-column: 1;
  }

  .today-panchanga-column,
  .today-personal-column {
    padding: 18px 15px;
  }

  .today-personal-column {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .today-personal-column .today-editorial-context {
    padding: 0 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--today-line);
  }

  .today-personal-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .today-personal-summary-row {
    padding: 16px 0;
  }

  .today-personal-summary-row + .today-personal-summary-row {
    padding: 16px 0 0;
    border-top: 1px solid var(--today-line);
    border-left: 0;
  }

  .today-summary-period > summary,
  .today-summary-period.is-unavailable {
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 3px;
  }

  .today-summary-period.is-unavailable {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-summary-period > summary > b,
  .today-summary-period.is-unavailable > b,
  .today-period-path,
  .today-summary-period.is-unavailable > span {
    grid-column: 1;
  }

  .today-summary-period > summary > i {
    grid-row: 1 / span 2;
    grid-column: 2;
  }

  .today-period-path {
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
  }

  .today-qualities,
  .today-day-points,
  .today-recommendations,
  .today-cta {
    margin-top: 10px;
    padding: 20px 15px;
    border-radius: 13px;
  }

  .today-qualities-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-qualities-grid article {
    padding: 0;
  }

  .today-rhythm-chart {
    display: grid;
    margin: 18px 0 2px;
    gap: 8px;
  }

  .today-rhythm-track {
    height: 138px;
  }

  .today-rhythm-marker > span {
    font-size: 10.5px;
  }

  .today-rhythm-marker.is-now {
    width: 38px;
    height: 38px;
  }

  .today-rhythm-sun {
    inset: -7px;
    width: 52px;
    height: 52px;
  }

  .today-day-points-list {
    position: relative;
    display: grid;
    margin: 20px 0 0;
    padding: 0 0 0 22px;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    border-top: 0;
    overflow: visible;
  }

  .today-day-points-list::before {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 5px;
    width: 1px;
    background: rgb(201 149 73 / 42%);
    content: "";
  }

  .today-day-points-list li,
  .today-day-points-list li:nth-child(4) {
    position: relative;
    display: grid;
    min-height: 58px;
    padding: 9px 0 9px 13px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--today-line);
    background: transparent;
    box-shadow: none;
  }

  .today-day-points-list li::before {
    position: absolute;
    top: 50%;
    left: -22px;
    width: 11px;
    height: 11px;
    border: 3px solid var(--today-paper);
    border-radius: 50%;
    background: var(--today-gold);
    box-shadow: 0 0 0 1px rgb(159 111 48 / 34%);
    content: "";
    transform: translateY(-50%);
  }

  .today-day-points-list li[data-rhythm="rahu"]::before {
    background: #93642d;
  }

  .today-day-points-list li[data-rhythm="abhijit"]::before,
  .today-day-points-list li[data-rhythm="now"]::before {
    background: var(--today-green);
  }

  .today-day-points-list time {
    font-size: 15px;
  }

  .today-social-links {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-social-link {
    min-height: 82px;
  }

  .today-bot-cta {
    align-items: stretch;
    flex-direction: column;
    gap: 11px;
  }

  .today-bot-link {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .today-dashboard-header::before,
  .today-dashboard-header::after {
    opacity: .72;
  }

  .today-dashboard-title h1 {
    font-size: clamp(30px, 9vw, 38px);
  }

  .today-quality-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .today-quality-until,
  .today-quality-transition summary {
    white-space: normal;
  }

  .today-nakshatra-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 721px) {
  .today-orbit-moon {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 760px) {
  #workspace-panel-main .varshaphala-sheet-header button,
  #workspace-panel-main .varshaphala-widget:not(.varshaphala-widget-varshaphala-periods) button {
    min-height: 44px !important;
    height: auto;
  }
}

/* Dynamic Today hero -----------------------------------------------------
   Palette, lunar phase and deterministic motif arrive as a small visual
   view-model from today-hero.js. The SVG remains decorative and lightweight. */
.today-dashboard-header.today-daily-hero {
  min-height: 218px;
  padding: clamp(24px, 2.35vw, 36px) clamp(24px, 3.2vw, 48px);
  grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr);
  align-items: center;
  gap: clamp(22px, 3vw, 48px);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--today-hero-orbit) 18%, transparent);
  background:
    radial-gradient(circle at 78% 48%, color-mix(in srgb, var(--today-hero-glow) 46%, transparent) 0 5%, transparent 31%),
    linear-gradient(118deg, var(--today-hero-bg-a) 0%, var(--today-hero-bg-a) 42%, var(--today-hero-bg-b) 100%);
  box-shadow:
    0 1px 2px rgb(20 28 24 / 2%),
    0 18px 48px color-mix(in srgb, var(--today-hero-orbit) 8%, transparent);
}

.today-dashboard-header.today-daily-hero::before {
  top: -132px;
  right: 16%;
  width: 430px;
  height: 310px;
  border-color: color-mix(in srgb, var(--today-hero-orbit) 9%, transparent);
}

.today-dashboard-header.today-daily-hero::after {
  right: -94px;
  bottom: -198px;
  width: 520px;
  height: 340px;
  border-color: color-mix(in srgb, var(--today-hero-accent) 11%, transparent);
}

.today-daily-hero .today-dashboard-title {
  position: relative;
  z-index: 2;
  max-width: 880px;
  align-content: center;
  gap: 5px;
}

.today-daily-hero .today-dashboard-kicker {
  color: var(--today-hero-orbit);
  letter-spacing: .14em;
}

.today-daily-hero .today-dashboard-title h1 {
  margin: 3px 0 2px;
  font-size: clamp(36px, 3.2vw, 50px);
  line-height: 1.04;
  white-space: normal;
}

.today-hero-meta {
  display: flex;
  margin: 1px 0 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 8px;
  color: color-mix(in srgb, var(--today-ink) 82%, var(--today-hero-orbit));
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 690;
  line-height: 1.35;
}

.today-hero-meta time {
  font: inherit;
}

.today-transit-controls {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.today-day-step,
.today-moment-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--today-hero-orbit) 42%, transparent);
  background: color-mix(in srgb, var(--today-card) 76%, transparent);
  color: var(--today-ink);
  box-shadow: 0 8px 18px rgba(18, 33, 31, .08);
  cursor: pointer;
}

.today-day-step {
  min-width: 76px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 760;
}

.today-moment-picker {
  position: relative;
}

.today-moment-toggle {
  gap: 9px;
  min-width: 188px;
  padding: 6px 12px;
  border-radius: 14px;
  text-align: left;
}

.today-moment-toggle svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.today-moment-toggle span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.today-moment-toggle small {
  color: var(--today-muted);
  font-size: .66rem;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.today-moment-toggle strong {
  overflow: hidden;
  font-size: .88rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-day-step:hover,
.today-moment-toggle:hover,
.today-day-step:focus-visible,
.today-moment-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--today-accent) 54%, var(--today-hero-orbit));
  outline: none;
}

.today-moment-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: grid;
  gap: 12px;
  width: min(360px, calc(100vw - 28px));
  padding: 13px;
  border: 1px solid var(--today-line);
  border-radius: 16px;
  background: var(--today-card);
  color: var(--today-ink);
  box-shadow: 0 18px 42px rgba(18, 33, 31, .18);
}

.today-moment-popover[hidden] {
  display: none;
}

.today-moment-popover > header,
.today-moment-popover > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.today-moment-popover > header button,
.today-moment-popover > footer button {
  min-height: 36px;
  border: 1px solid var(--today-line);
  border-radius: 999px;
  background: var(--today-card);
  color: inherit;
  cursor: pointer;
}

.today-moment-popover > header button {
  width: 36px;
  padding: 0;
}

.today-moment-popover > footer button {
  padding: 0 13px;
}

.today-moment-popover > footer button[type="submit"] {
  border-color: color-mix(in srgb, var(--today-accent) 56%, var(--today-line));
  background: var(--today-accent);
  color: var(--ivory);
}

.today-moment-fields {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.today-transit.workspace-widget {
  grid-template-rows: auto minmax(0, 1fr);
}

.today-chart-widget-header {
  height: auto;
  min-height: 56px;
}

.today-chart-transit-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.today-chart-transit-toolbar > small {
  flex: 0 0 auto;
}

.today-chart-transit-toolbar .today-transit-controls {
  margin-top: 0;
  gap: 6px;
}

.today-chart-transit-toolbar .today-day-step,
.today-chart-transit-toolbar .today-moment-toggle {
  min-height: 38px;
}

.today-daily-hero .today-hero-facts {
  max-width: 900px;
  margin-top: 4px;
  color: var(--today-muted);
  font-size: clamp(14px, 1.13vw, 17px);
  font-weight: 580;
  line-height: 1.45;
  white-space: normal;
}

.today-daily-visual {
  position: relative;
  z-index: 2;
  width: min(100%, 430px);
  min-width: 0;
  height: 184px;
  justify-self: end;
  color: var(--today-hero-orbit);
}

.today-daily-visual svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.today-hero-orbits {
  fill: none;
  stroke: var(--today-hero-orbit);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.15px;
  opacity: .43;
}

.today-hero-orbits .is-secondary {
  opacity: .48;
}

.today-hero-orbits .is-accent {
  stroke: var(--today-hero-accent);
  stroke-width: .9px;
  opacity: .54;
}

.today-hero-orbits.is-fire {
  stroke-width: 1.35px;
}

.today-hero-orbits.is-earth ellipse {
  transform-box: fill-box;
  transform-origin: center;
}

.today-hero-orbits.is-air {
  stroke-width: .8px;
  opacity: .34;
}

.today-hero-orbits.is-water {
  stroke-width: 1.2px;
  opacity: .39;
}

.today-hero-motif {
  fill: color-mix(in srgb, var(--today-hero-orbit) 70%, transparent);
  stroke: color-mix(in srgb, var(--today-hero-orbit) 45%, transparent);
  stroke-width: .65px;
  transform-box: fill-box;
  transform-origin: center;
  animation: today-hero-motif-drift 9s ease-in-out infinite;
}

.today-hero-motif circle {
  stroke: var(--today-hero-bg-a);
  stroke-width: 1.1px;
}

.today-hero-motif circle.is-accent {
  fill: var(--today-hero-accent);
  stroke: color-mix(in srgb, var(--today-hero-bg-a) 75%, transparent);
  stroke-width: 1.6px;
}

.today-hero-moon-glow {
  fill: var(--today-hero-glow);
  opacity: .66;
  transform-box: fill-box;
  transform-origin: center;
  animation: today-hero-moon-glow 5.4s ease-in-out infinite;
}

.today-daily-hero .today-moon-phase-shadow {
  fill: #172421;
}

.today-daily-hero .today-moon-phase-light {
  fill: var(--today-hero-moon);
}

.today-daily-hero .today-moon-phase-craters {
  fill: color-mix(in srgb, var(--today-hero-orbit) 72%, #59635f);
  opacity: .18;
  mix-blend-mode: multiply;
}

.today-daily-hero .today-moon-phase-rim {
  fill: none;
  stroke: color-mix(in srgb, var(--today-hero-moon) 78%, var(--today-hero-orbit));
  stroke-width: 1.1px;
}

.today-daily-hero[data-moon-phase="new"] .today-hero-moon-glow {
  opacity: .24;
}

.today-daily-hero[data-moon-phase="new"] .today-moon-phase-rim {
  stroke: color-mix(in srgb, var(--today-hero-orbit) 52%, transparent);
}

.today-daily-hero[data-moon-phase="full"] .today-hero-moon-glow {
  opacity: .92;
}

.today-phase-badge {
  position: absolute;
  right: 2px;
  bottom: 7px;
  display: grid;
  min-width: 150px;
  min-height: 44px;
  padding: 8px 12px;
  grid-template-columns: auto 1px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--today-hero-orbit) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--today-hero-bg-a) 82%, transparent);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--today-hero-orbit) 10%, transparent);
  backdrop-filter: blur(8px);
}

.today-phase-badge strong {
  color: var(--today-ink);
  font-size: 15px;
  line-height: 1;
}

.today-phase-badge > span {
  width: 1px;
  height: 18px;
  background: color-mix(in srgb, var(--today-hero-orbit) 23%, transparent);
}

.today-phase-badge small {
  color: color-mix(in srgb, var(--today-ink) 72%, var(--today-hero-orbit));
  font-size: 11px;
  font-weight: 720;
  line-height: 1.15;
  white-space: nowrap;
}

@keyframes today-hero-moon-glow {
  0%,
  100% { opacity: .58; transform: scale(.96); }
  50% { opacity: .82; transform: scale(1.045); }
}

@keyframes today-hero-motif-drift {
  0%,
  100% { transform: translate(0, 0); }
  50% { transform: translate(2px, -2px); }
}

@media (max-width: 980px) {
  .today-dashboard-header.today-daily-hero {
    min-height: 210px;
    padding-inline: clamp(22px, 4vw, 34px);
    grid-template-columns: minmax(0, 1fr) minmax(255px, .62fr);
    gap: 18px;
  }

  .today-daily-hero .today-dashboard-title h1 {
    font-size: clamp(32px, 4.4vw, 43px);
  }

  .today-daily-visual {
    height: 168px;
  }
}

@media (max-width: 720px) {
  .today-dashboard-header.today-daily-hero {
    min-height: 0;
    padding: 22px 18px 17px;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .today-daily-hero .today-dashboard-title h1 {
    font-size: clamp(30px, 9vw, 40px);
    line-height: 1.07;
  }

  .today-hero-meta {
    font-size: 14px;
  }

  .today-daily-hero .today-hero-facts {
    max-width: none;
    font-size: 13.5px;
  }

  .today-transit-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 6px;
  }

  .today-day-step,
  .today-moment-toggle {
    width: 100%;
    min-height: 44px;
  }

  .today-day-step {
    min-width: 0;
    padding-inline: 8px;
  }

  .today-moment-toggle {
    min-width: 0;
    padding-inline: 9px;
  }

  .today-moment-popover {
    left: 50%;
    width: min(360px, calc(100vw - 24px));
    transform: translateX(-50%);
  }

  .today-daily-visual {
    display: block;
    width: 100%;
    height: 134px;
    justify-self: stretch;
  }

  .today-daily-visual svg {
    width: min(100%, 340px);
    margin-left: auto;
  }

  .today-phase-badge {
    right: 0;
    bottom: 4px;
    min-width: 140px;
    min-height: 40px;
    padding: 7px 10px;
  }

  .today-phase-badge strong {
    font-size: 14px;
  }
}

@media (max-width: 430px) {
  .today-dashboard-header.today-daily-hero::before,
  .today-dashboard-header.today-daily-hero::after {
    opacity: .55;
  }

  .today-daily-visual {
    height: 124px;
  }

  .today-hero-orbits .is-secondary,
  .today-hero-motif line:nth-of-type(n + 4),
  .today-hero-motif circle:nth-of-type(n + 5) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .today-hero-moon-glow,
  .today-hero-motif {
    animation: none;
  }
}

/* Today transit chart header: the selected moment and its controls are one unit. */
.account-app .today-transit.workspace-widget {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.account-app .today-transit.workspace-widget > .today-chart-widget-header {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: auto !important;
  min-height: 52px !important;
  padding: 7px 9px 7px 12px;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: visible;
}

.today-chart-source {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 5px;
}

.today-chart-header-actions {
  display: flex;
  min-width: 0;
  margin-left: auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.today-transit-controls {
  position: relative;
  z-index: 4;
  display: grid;
  min-width: 0;
  margin: 0;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  gap: 4px;
}

.today-chart-header-actions .today-day-step,
.today-chart-source .today-moment-toggle,
.today-chart-source > .today-chart-style-toggle {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  height: 34px;
  min-height: 34px;
  margin: 0;
  border-radius: 10px;
  box-shadow: none;
}

.today-chart-header-actions .today-day-step {
  padding: 0 7px;
  font-size: 11.5px;
  white-space: nowrap;
}

.today-chart-source .today-moment-date-trigger {
  width: auto;
  max-width: 100%;
  padding: 0 7px;
  border-color: transparent;
  background: transparent;
  color: var(--today-ink);
  box-shadow: none;
  font: inherit;
  text-align: left;
}

.today-moment-date-trigger time {
  display: block;
  overflow: hidden;
  font-size: clamp(12px, .86vw, 14px);
  font-weight: 740;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-chart-source .today-moment-date-trigger:hover,
.today-chart-source .today-moment-date-trigger:focus-visible,
.today-chart-source .today-moment-date-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--today-green) 24%, transparent);
  background: color-mix(in srgb, var(--today-green) 7%, var(--today-paper));
}

.today-chart-source > .today-chart-style-toggle {
  width: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--today-paper) 82%, transparent);
  color: var(--today-ink);
}

.today-chart-source > .today-chart-style-toggle svg {
  width: 17px;
  height: 17px;
}

.today-chart-source .today-moment-picker {
  flex: 0 1 auto;
  min-width: 0;
}

.account-app .today-moment-backdrop {
  position: fixed;
  z-index: 1390;
  inset: 0;
  width: 100vw !important;
  min-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgb(14 28 24 / 38%);
  backdrop-filter: blur(2px);
  cursor: default;
}

.account-app .today-moment-backdrop[hidden] {
  display: none;
}

.today-chart-source .today-moment-popover {
  position: fixed;
  z-index: 1400;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  box-sizing: border-box;
  width: min(520px, calc(100vw - 32px));
  max-height: min(680px, calc(100dvh - 32px));
  padding: 18px;
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--today-green) 18%, var(--today-line));
  border-radius: 20px;
  background: var(--today-paper, #fffdf8);
  box-shadow: 0 28px 90px rgb(12 27 23 / 28%);
  color: var(--today-ink);
  isolation: isolate;
}

.today-moment-popover > header {
  align-items: flex-start;
}

.today-moment-popover > header > div {
  display: grid;
  gap: 3px;
}

.today-moment-popover > header strong {
  font-size: 18px;
  line-height: 1.2;
}

.today-moment-popover > header small {
  color: var(--today-muted);
  font-size: 12px;
  font-weight: 560;
}

.today-moment-popover > header button {
  flex: 0 0 auto;
  border-color: transparent;
  background: var(--today-paper, #fffdf8);
  font-size: 21px;
  line-height: 1;
}

.today-moment-popover > header button:hover,
.today-moment-popover > header button:focus-visible {
  border-color: var(--today-line);
  background: var(--today-paper-muted);
}

.account-app .today-moment-popover > footer button {
  box-sizing: border-box;
  width: auto !important;
  min-width: 104px !important;
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  border-color: color-mix(in srgb, var(--today-green) 22%, var(--today-line));
  background: var(--today-paper, #fffdf8);
  color: var(--today-ink);
  font-weight: 720;
}

.account-app .today-moment-popover > footer button[type="submit"] {
  border-color: var(--today-green, #17695f);
  background: var(--today-green, #17695f);
  color: #fffdf8;
}

.account-app .today-moment-popover > footer button:hover,
.account-app .today-moment-popover > footer button:focus-visible {
  border-color: color-mix(in srgb, var(--today-green) 62%, var(--today-line));
  outline: none;
}

.today-moment-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 10px;
}

.today-moment-fields .segmented-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.today-moment-fields .segmented-control {
  display: flex;
  min-width: 0;
  min-height: 50px;
  padding: 0 11px;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--today-green) 18%, var(--today-line));
  border-radius: 12px;
  background: var(--today-paper-muted, #f5f2eb);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.today-moment-fields .segmented-control:focus-within {
  border-color: color-mix(in srgb, var(--today-green) 64%, var(--today-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--today-green) 12%, transparent);
}

.today-moment-fields .segmented-control input {
  box-sizing: content-box;
  width: 2.15ch;
  min-width: 2.15ch;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  outline: 0;
  background: transparent;
  color: var(--today-ink);
  font: inherit;
  font-size: 17px;
  text-align: center;
  caret-color: transparent;
}

.today-moment-fields .segmented-control input[data-segment-part="year"] {
  width: 4.3ch;
  min-width: 4.3ch;
}

.today-moment-fields .segmented-control input:focus {
  background: color-mix(in srgb, var(--today-green) 10%, transparent);
}

.today-moment-chart-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--today-muted);
  font-size: 12px;
  font-weight: 680;
}

.today-moment-chart-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.account-app .today-moment-chart-controls > button {
  display: inline-flex;
  width: auto !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--today-line);
  border-radius: 10px;
  background: var(--today-paper, #fffdf8);
  color: var(--today-ink);
  font: inherit;
  cursor: pointer;
}

.today-moment-chart-controls svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

@media (max-width: 1120px) {
  .account-app .today-transit.workspace-widget > .today-chart-widget-header {
    display: flex;
    height: auto !important;
    min-height: 60px !important;
    padding: 8px 10px;
    grid-template-rows: none !important;
    gap: 8px;
  }

  .today-chart-header-actions {
    width: auto;
    margin-left: auto;
  }

  .today-transit-controls {
    min-width: 0;
    grid-template-columns: repeat(2, max-content);
    gap: 5px;
  }

  .today-chart-header-actions .today-day-step,
  .today-chart-source .today-moment-toggle,
  .today-chart-source > .today-chart-style-toggle {
    height: 44px !important;
    min-height: 44px !important;
  }

  .today-chart-header-actions .today-day-step {
    width: auto !important;
    min-width: 56px !important;
    padding-inline: 8px;
    font-size: 12px;
  }

  .today-chart-source .today-moment-date-trigger {
    width: auto !important;
    min-width: 0 !important;
    padding-inline: 7px;
  }

  .today-chart-source > .today-chart-style-toggle {
    width: 44px !important;
    min-width: 44px !important;
  }

  .account-app .today-moment-popover > footer button {
    width: auto !important;
    min-width: 88px !important;
  }
}

@media (max-width: 720px) {
  .today-chart-source .today-moment-popover {
    top: auto;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    width: auto;
    max-height: calc(100dvh - 16px - env(safe-area-inset-bottom));
    padding: 16px;
    transform: none;
    border-radius: 20px;
  }

  .today-moment-fields {
    gap: 8px;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  }

  .today-moment-fields .segmented-control {
    min-height: 48px;
    padding-inline: 7px;
  }

  .today-moment-fields .segmented-control input {
    font-size: 16px;
  }
}

/* Shared workspace sheet hero ------------------------------------------------
   One structural component; sheet-specific differences are design tokens and
   decorative motifs selected through data-sheet-theme. */
.workspace-sheet-hero-host {
  display: block;
  min-width: 0;
  padding-bottom: var(--workspace-grid-gap, 6px);
}

.workspace-sheet-hero-host[hidden] {
  display: none;
}

.workspace-sheet-hero-host > .workspace-sheet-hero {
  width: 100%;
}

.workspace-sheet-hero {
  --sheet-hero-accent: #617069;
  --sheet-hero-accent-soft: rgba(97, 112, 105, .1);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 64%) minmax(0, 36%);
  grid-template-areas: "content visual";
  align-items: center;
  min-width: 0;
  height: 168px;
  min-height: 168px;
  padding: 20px 24px;
  overflow: hidden;
  border: 1px solid rgba(38, 56, 49, .13);
  border-radius: 16px;
  background:
    radial-gradient(circle at 84% 34%, var(--sheet-hero-accent-soft), transparent 35%),
    linear-gradient(125deg, #fbf8ef 0%, #f8f6ef 66%, #f2f4ee 100%);
  box-shadow: 0 7px 20px rgba(34, 49, 42, .045);
}

.workspace-sheet-hero[data-sheet-theme="varshaphala"] {
  --sheet-hero-accent: #a87327;
  --sheet-hero-accent-soft: rgba(181, 127, 40, .12);
  background:
    radial-gradient(circle at 83% 42%, rgba(205, 164, 83, .14), transparent 35%),
    linear-gradient(125deg, #fbf7e9 0%, #f7f3e8 66%, #eef3e9 100%);
}

.workspace-sheet-hero[data-sheet-theme="natal"] { --sheet-hero-accent: #176f61; --sheet-hero-accent-soft: rgba(23, 111, 97, .12); }
.workspace-sheet-hero[data-sheet-theme="transits"] { --sheet-hero-accent: #315e86; --sheet-hero-accent-soft: rgba(49, 94, 134, .13); }
.workspace-sheet-hero[data-sheet-theme="compatibility"] { --sheet-hero-accent: #8b5570; --sheet-hero-accent-soft: rgba(139, 85, 112, .13); }
.workspace-sheet-hero[data-sheet-theme="prashna"] { --sheet-hero-accent: #66578b; --sheet-hero-accent-soft: rgba(102, 87, 139, .13); }
.workspace-sheet-hero[data-sheet-theme="muhurta"] { --sheet-hero-accent: #b96b2c; --sheet-hero-accent-soft: rgba(185, 107, 44, .13); }
.workspace-sheet-hero[data-sheet-theme="rectification"] { --sheet-hero-accent: #5d6e7b; --sheet-hero-accent-soft: rgba(93, 110, 123, .13); }
.workspace-sheet-hero[data-sheet-theme="bhrigu"] { --sheet-hero-accent: #6f643c; --sheet-hero-accent-soft: rgba(111, 100, 60, .13); }
.workspace-sheet-hero[data-sheet-theme="blank"] { --sheet-hero-accent: #66736e; --sheet-hero-accent-soft: rgba(102, 115, 110, .1); }

.workspace-sheet-hero__content,
.workspace-sheet-hero-copy {
  grid-area: content;
  position: relative;
  z-index: 2;
  min-width: 0;
  align-self: center;
}

.workspace-sheet-hero__eyebrow,
.workspace-sheet-hero-eyebrow {
  display: block;
  color: var(--sheet-hero-accent);
  font: 600 12px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.workspace-sheet-hero__title,
.workspace-sheet-hero h1 {
  margin: 7px 0 4px;
  color: #1c312a;
  font-family: Literata, Georgia, serif;
  font-size: clamp(34px, 2.55vw, 42px);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -.03em;
}

.workspace-sheet-hero__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.workspace-sheet-hero__title-row .workspace-sheet-hero__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-sheet-hero__chart-switch {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid rgba(38, 56, 49, .18);
  border-radius: 10px;
  background: rgba(253, 251, 245, .88);
  color: var(--sheet-hero-accent);
  cursor: pointer;
}

.workspace-sheet-hero__chart-switch:hover,
.workspace-sheet-hero__chart-switch:focus-visible,
.workspace-sheet-hero__chart-switch[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--sheet-hero-accent) 48%, transparent);
  background: color-mix(in srgb, var(--sheet-hero-accent-soft) 58%, #fff);
}

.workspace-sheet-hero__chart-switch:focus-visible {
  outline: 2px solid var(--sheet-hero-accent);
  outline-offset: 2px;
}

.workspace-sheet-hero__chart-switch:disabled {
  cursor: wait;
  opacity: .7;
}

.workspace-sheet-hero__chart-switch svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.workspace-sheet-hero__chart-switch-spinner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--sheet-hero-accent) 25%, transparent);
  border-top-color: var(--sheet-hero-accent);
  border-radius: 50%;
  opacity: 0;
}

.workspace-sheet-hero__chart-switch[aria-busy="true"] svg { opacity: 0; }
.workspace-sheet-hero__chart-switch[aria-busy="true"] .workspace-sheet-hero__chart-switch-spinner {
  opacity: 1;
  animation: workspace-chart-switch-spin .75s linear infinite;
}

@keyframes workspace-chart-switch-spin { to { transform: rotate(360deg); } }

.workspace-sheet-hero__metadata,
.workspace-sheet-hero-subtitle,
.workspace-sheet-hero-state {
  max-width: 62ch;
  margin: 0;
  color: #5f6c67;
  font: 450 16px/1.4 Inter, system-ui, sans-serif;
}

.workspace-sheet-hero__state,
.workspace-sheet-hero-state {
  margin-top: 6px;
  color: #8a6531;
  font-size: 13px;
  font-weight: 550;
}

.workspace-sheet-hero__facts,
.workspace-sheet-hero-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 9px;
  margin-top: 8px;
  color: #40534c;
  font: 500 15px/1.35 Inter, system-ui, sans-serif;
}

.workspace-sheet-hero__fact,
.workspace-sheet-hero-fact {
  white-space: nowrap;
}

.workspace-sheet-hero__fact strong,
.workspace-sheet-hero-fact strong {
  color: #263a33;
  font-weight: 650;
}

.workspace-sheet-hero__fact-separator {
  color: #98a19d;
}

.workspace-sheet-hero__fact.is-accent,
.workspace-sheet-hero-fact.is-accent strong,
.workspace-sheet-hero-fact.is-accent strong span {
  color: var(--sheet-hero-accent);
}

.workspace-sheet-hero__visual {
  grid-area: visual;
  position: absolute;
  z-index: 1;
  inset: 0 0 0 auto;
  width: 41%;
  overflow: hidden;
  opacity: .2;
  pointer-events: none;
}

.workspace-sheet-hero[data-sheet-theme="varshaphala"] .workspace-sheet-hero__visual {
  opacity: .22;
}

.workspace-sheet-hero__visual svg {
  display: block;
  width: 100%;
  height: 100%;
}

.workspace-sheet-hero__visual .hero-motif-chart,
.workspace-sheet-hero__visual .hero-motif-nakshatra,
.workspace-sheet-hero__visual .hero-motif-arc,
.workspace-sheet-hero__visual .hero-motif-division,
.workspace-sheet-hero__visual .hero-motif-orbit,
.workspace-sheet-hero__visual .hero-motif-line {
  fill: none;
  stroke: var(--sheet-hero-accent);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}

.workspace-sheet-hero__visual .hero-motif-chart {
  opacity: .72;
}

.workspace-sheet-hero__visual .hero-motif-nakshatra {
  stroke-dasharray: 2 5;
  opacity: .62;
}

.workspace-sheet-hero__visual .hero-motif-house {
  fill: var(--sheet-hero-accent-soft);
  stroke: var(--sheet-hero-accent);
  stroke-width: 1.25;
}

.workspace-sheet-hero__visual .hero-motif-gold {
  fill: none;
  stroke: #bc8740;
  stroke-width: 1.5;
}

.workspace-sheet-hero__visual .hero-motif-asc,
.workspace-sheet-hero__visual .hero-motif-point {
  fill: var(--sheet-hero-accent);
}

.workspace-sheet-hero__visual .hero-motif-arc,
.workspace-sheet-hero__visual .hero-motif-orbit-outer {
  stroke-dasharray: 3 6;
  opacity: .58;
}

.workspace-sheet-hero__visual .hero-motif-division {
  opacity: .64;
}

.workspace-sheet-hero__visual .hero-motif-sun {
  fill: var(--sheet-hero-accent-soft);
  stroke: var(--sheet-hero-accent);
  stroke-width: 1.35;
}

.workspace-sheet-hero__visual .hero-motif-crown {
  fill: var(--sheet-hero-accent);
}

.workspace-sheet-hero__actions,
.workspace-sheet-hero-controls {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  width: min(45%, 650px);
}

.workspace-sheet-hero__control,
.workspace-sheet-hero-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  max-width: 210px;
  padding: 9px 13px;
  overflow: hidden;
  border: 1px solid rgba(38, 56, 49, .18);
  border-radius: 10px;
  background: rgba(253, 251, 245, .93);
  color: #30423b;
  font: 600 14px/1.15 Inter, system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.workspace-sheet-hero__control > span:not(.visually-hidden),
.workspace-sheet-hero-control > span:not(.visually-hidden) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace-sheet-hero__control.is-primary,
.workspace-sheet-hero-control.is-primary {
  border-color: color-mix(in srgb, var(--sheet-hero-accent) 30%, transparent);
}

.workspace-sheet-hero__control.is-icon-only,
.workspace-sheet-hero-control.is-icon-only {
  flex: 0 0 44px;
  width: 44px;
  padding: 0;
  font-size: 20px;
}

.workspace-sheet-hero__control:hover,
.workspace-sheet-hero__control[aria-pressed="true"],
.workspace-sheet-hero-control:hover,
.workspace-sheet-hero-control[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--sheet-hero-accent) 48%, transparent);
  background: color-mix(in srgb, var(--sheet-hero-accent-soft) 58%, #fff);
  color: #243a32;
}

.workspace-sheet-hero__control:focus-visible,
.workspace-sheet-hero-control:focus-visible {
  outline: 2px solid var(--sheet-hero-accent);
  outline-offset: 2px;
}

.workspace-sheet-hero__control:disabled,
.workspace-sheet-hero-control:disabled {
  cursor: wait;
  opacity: .58;
}

.workspace-sheet-hero__control-icon {
  color: var(--sheet-hero-accent);
  font-size: 20px;
  line-height: 1;
}

.workspace-sheet-hero__disclosure {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.workspace-sheet-hero__skeleton {
  display: grid;
  gap: 9px;
  width: min(520px, 80%);
}

.workspace-sheet-hero__skeleton span {
  display: block;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(72, 90, 82, .08), rgba(72, 90, 82, .16), rgba(72, 90, 82, .08));
  background-size: 220% 100%;
  animation: workspace-sheet-hero-skeleton 1.4s ease-in-out infinite;
}

.workspace-sheet-hero__skeleton span:nth-child(1) { width: 26%; height: 10px; }
.workspace-sheet-hero__skeleton span:nth-child(2) { width: 70%; height: 34px; }
.workspace-sheet-hero__skeleton span:nth-child(3) { width: 88%; }
.workspace-sheet-hero__skeleton span:nth-child(4) { width: 42%; }

@keyframes workspace-sheet-hero-skeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-sheet-hero__skeleton span {
    animation: none;
  }
}

/* Legacy motif class kept only as a low-specificity compatibility hook. */
.workspace-sheet-hero-motif {
  z-index: 1;
  width: 100%;
  max-height: 146px;
  opacity: .2;
  pointer-events: none;
}

.workspace-row[data-workspace-row^="varsha-row-"] {
  align-items: stretch;
}

.workspace-row[data-workspace-row^="varsha-row-"] > .workspace-widget {
  height: 100%;
  overflow: hidden;
}

.varshaphala-widget {
  background: #fcfbf6;
}

.varshaphala-widget .workspace-widget-source {
  display: none;
}

.varshaphala-widget:not(.varshaphala-widget-varshaphala-periods) .workspace-widget-body {
  min-height: 0;
  padding: 12px;
  color: #34453f;
}

.varshaphala-widget:not(.varshaphala-widget-varshaphala-periods) button,
.varshaphala-widget:not(.varshaphala-widget-varshaphala-periods) select {
  font-family: Inter, system-ui, sans-serif;
}

.varshaphala-widget:not(.varshaphala-widget-varshaphala-periods) button {
  min-height: 44px;
}

.varshaphala-factor-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.varshaphala-factor-list > div {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid rgba(38, 56, 49, .09);
}

.varshaphala-factor-list > div:last-child {
  border-bottom: 0;
}

.varshaphala-factor-list dt {
  color: #77827d;
  font-size: 11px;
  font-weight: 720;
}

.varshaphala-factor-list dd {
  min-width: 0;
  margin: 0;
  color: #263a33;
  font-size: 12px;
  font-weight: 760;
  text-align: right;
}

.varshaphala-varshesha-trace {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(38, 56, 49, .12);
}

.varshaphala-varshesha-trace h3 {
  margin: 0;
  color: #263a33;
  font: 700 13px/1.35 Inter, system-ui, sans-serif;
}

.varshaphala-trace-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.varshaphala-varshesha-trace table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.4;
}

.varshaphala-varshesha-trace th,
.varshaphala-varshesha-trace td {
  padding: 7px 6px;
  border-bottom: 1px solid rgba(38, 56, 49, .09);
  text-align: left;
  vertical-align: top;
}

.varshaphala-varshesha-trace thead th {
  color: #77827d;
  font-weight: 720;
}

.varshaphala-varshesha-trace tbody th {
  color: #34453f;
  font-weight: 650;
}

.varshaphala-varshesha-trace p {
  margin: 0;
  color: #66736e;
  font-size: 11px;
  line-height: 1.45;
}

.varshaphala-varshesha-trace .varshaphala-trace-result {
  color: #176f61;
}

.varshaphala-factor-list button,
.varshaphala-relation-table button,
.varshaphala-relation-links button,
.varshaphala-planets-table button {
  min-height: 36px;
  padding: 5px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #176f61;
  font: inherit;
  font-weight: 770;
  cursor: pointer;
}

.varshaphala-list {
  display: grid;
  gap: 6px;
}

.varshaphala-yoga-list,
.varshaphala-aspect-list,
.varshaphala-saham-list {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.varshaphala-yoga-list {
  max-height: 276px;
}

.varshaphala-list article {
  min-width: 0;
  border: 1px solid rgba(38, 56, 49, .1);
  border-radius: 10px;
  background: #faf8f1;
}

.varshaphala-list-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title meta" "detail meta";
  align-items: center;
  gap: 2px 9px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: #263a33;
  text-align: left;
  cursor: pointer;
}

.varshaphala-list-main strong {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.varshaphala-list-main span {
  grid-area: detail;
  min-width: 0;
  overflow: hidden;
  color: #66736e;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.varshaphala-list-main small {
  grid-area: meta;
  color: #8a6632;
  font-size: 10px;
  font-weight: 700;
  text-align: right;
}

.varshaphala-filter-row,
.varshaphala-chip-row,
.varshaphala-tab-row {
  display: flex;
  gap: 5px;
  margin-bottom: 9px;
  overflow-x: auto;
  scrollbar-width: none;
}

.varshaphala-filter-row::-webkit-scrollbar,
.varshaphala-chip-row::-webkit-scrollbar,
.varshaphala-tab-row::-webkit-scrollbar {
  display: none;
}

.varshaphala-filter-row button,
.varshaphala-chip-row button,
.varshaphala-tab-row button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10px;
  white-space: nowrap;
}

.varshaphala-filter-row button[aria-pressed="true"],
.varshaphala-chip-row button[aria-pressed="true"],
.varshaphala-tab-row button[aria-selected="true"] {
  border-color: rgba(168, 115, 39, .44);
  background: rgba(181, 127, 40, .1);
  color: #78531f;
}

.varshaphala-empty-list {
  margin: 0;
  padding: 20px 12px;
  border: 1px dashed rgba(38, 56, 49, .16);
  border-radius: 10px;
  color: #75817c;
  font-size: 12px;
}

.varshaphala-planets-table-wrap,
.varshaphala-relation-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.varshaphala-planets-table-wrap {
  max-height: 352px;
}

.varshaphala-planets-table,
.varshaphala-relation-table {
  width: 100%;
  border-collapse: collapse;
  color: #34453f;
  font-size: 10.5px;
  line-height: 1.3;
}

.varshaphala-planets-table {
  min-width: 760px;
}

.varshaphala-planets-table th,
.varshaphala-planets-table td,
.varshaphala-relation-table th,
.varshaphala-relation-table td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(38, 56, 49, .09);
  text-align: left;
  vertical-align: middle;
}

.varshaphala-planets-table thead th,
.varshaphala-relation-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f2efe5;
  color: #6f7a75;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.varshaphala-planets-table tbody th,
.varshaphala-relation-table tbody th {
  color: #263a33;
  font-weight: 760;
}

.varshaphala-planets-table tr.is-special-point {
  background: rgba(181, 127, 40, .08);
}

.varshaphala-relation-table {
  min-width: 520px;
}

.varshaphala-relation-links {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  overflow-x: auto;
}

.varshaphala-relation-links > span {
  flex: 0 0 auto;
  color: #77827d;
  font-size: 10px;
  font-weight: 780;
}

.varshaphala-relation-links button {
  flex: 0 0 auto;
  min-height: 36px;
  border: 1px solid rgba(38, 56, 49, .1);
}

.varshaphala-relation-summary {
  display: grid;
  gap: 12px;
}

.varshaphala-relation-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.varshaphala-relation-cards article {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 104px;
  padding: 13px;
  border: 1px solid rgba(38, 56, 49, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .58);
}

.varshaphala-relation-cards article > span,
.varshaphala-activated-houses span {
  color: #77827d;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.varshaphala-relation-cards strong,
.varshaphala-relation-cards strong button {
  color: #263a33;
  font-size: 15px;
  font-weight: 780;
}

.varshaphala-relation-cards strong button {
  justify-content: flex-start;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #176f61;
}

.varshaphala-relation-cards small {
  color: #66756f;
  font-size: 11px;
  line-height: 1.35;
}

.varshaphala-activated-houses {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(181, 127, 40, .08);
}

.varshaphala-activated-houses strong {
  color: #78531f;
  font-size: 12px;
}

.varshaphala-strength-ranking {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.varshaphala-strength-ranking li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid rgba(38, 56, 49, .09);
}

.varshaphala-strength-ranking li > span {
  color: #a87327;
  font-size: 10px;
  font-weight: 800;
}

.varshaphala-strength-ranking button {
  display: grid;
  justify-items: start;
  min-width: 0;
  padding: 4px 5px;
  border: 0;
  background: transparent;
  color: #176f61;
  text-align: left;
  cursor: pointer;
}

.varshaphala-strength-ranking button small {
  max-width: 100%;
  overflow: hidden;
  color: #77827d;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.varshaphala-strength-ranking li > b {
  color: #34453f;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.varshaphala-month-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.varshaphala-month-grid button {
  display: grid;
  align-content: center;
  justify-items: start;
  min-width: 0;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid rgba(38, 56, 49, .12);
  border-radius: 9px;
  background: #faf8f1;
  color: #34453f;
  cursor: pointer;
}

.varshaphala-month-grid button[aria-pressed="true"] {
  border-color: rgba(168, 115, 39, .52);
  background: rgba(181, 127, 40, .1);
  color: #79551f;
}

.varshaphala-month-grid button strong {
  font-size: 12px;
}

.varshaphala-month-grid button span {
  overflow: hidden;
  color: #78837e;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.varshaphala-month-grid .varshaphala-year-return {
  grid-column: span 2;
}

.varshaphala-chart-overlay {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  align-self: end;
  justify-self: stretch;
  margin: 12px;
  gap: 5px;
  padding: 7px 9px;
}

.chart-widget:has(.varshaphala-chart-overlay) .workspace-widget-body {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}

.chart-widget:has(.varshaphala-chart-overlay) .workspace-widget-body > .chart-viewer {
  grid-area: 1 / 1;
  height: 100% !important;
}

.varshaphala-chart-overlay > span,
.varshaphala-chart-overlay button {
  min-height: 34px;
  padding: 5px 8px;
  font-size: 10px;
}

@media (min-width: 1181px) {
  .workspace-row[data-workspace-row^="varsha-row-"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workspace-row[data-workspace-row="varsha-row-2"] > [data-widget-id="varsha-planets"],
  .workspace-row[data-workspace-row="varsha-row-3"] > [data-widget-id="varsha-strength"] {
    grid-column: span 2 !important;
  }

  .workspace-row[data-workspace-row="varsha-row-5"] > [data-widget-id="varsha-months"] {
    grid-column: span 3 !important;
  }

  .workspace-row[data-workspace-row="varsha-row-2"] {
    grid-auto-rows: 420px;
  }

  .workspace-row[data-workspace-row="varsha-row-3"] {
    grid-auto-rows: 460px;
  }

  .workspace-row[data-workspace-row="varsha-row-4"] {
    grid-auto-rows: 420px;
  }

  .workspace-row[data-workspace-row="varsha-row-5"] {
    grid-auto-rows: 250px;
  }
}

@media (max-width: 1180px) {
  .workspace-sheet-hero {
    grid-template-columns: minmax(0, 68%) minmax(0, 32%);
    grid-template-areas: "content visual" "actions actions";
    height: auto;
    min-height: 168px;
    gap: 10px 16px;
    padding-block: 18px;
  }

  .workspace-sheet-hero__actions,
  .workspace-sheet-hero-controls {
    grid-area: actions;
    position: relative;
    top: auto;
    right: auto;
    justify-content: flex-start;
    width: 100%;
  }

  .workspace-sheet-hero__visual {
    width: 36%;
  }
}

@media (max-width: 900px) {
  .workspace-sheet-hero {
    grid-template-columns: minmax(0, 72%) minmax(0, 28%);
    min-height: 0;
    padding: 19px;
  }

  .workspace-sheet-hero__title,
  .workspace-sheet-hero h1 {
    font-size: clamp(25px, 5vw, 34px);
  }

  .workspace-sheet-hero__visual {
    width: 32%;
    opacity: .14;
  }

  .workspace-sheet-hero[data-sheet-theme="varshaphala"] .workspace-sheet-hero__visual {
    opacity: .17;
  }

  .workspace-row[data-workspace-row^="varsha-row-"] > .workspace-widget {
    grid-column: 1 / -1 !important;
    height: auto;
  }

  .workspace-row[data-workspace-row^="varsha-row-"] {
    grid-auto-rows: auto !important;
  }

  .workspace-row[data-workspace-row="varsha-row-1"] > [data-widget-id="varsha-periods"],
  .workspace-row[data-workspace-row="varsha-row-2"] > .workspace-widget,
  .workspace-row[data-workspace-row="varsha-row-3"] > .workspace-widget,
  .workspace-row[data-workspace-row="varsha-row-4"] > .workspace-widget,
  .workspace-row[data-workspace-row="varsha-row-5"] > .workspace-widget {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .workspace-sheet-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "content" "actions";
    gap: 13px;
    height: auto;
    min-height: 0;
    padding: 18px 16px 16px;
  }

  .workspace-sheet-hero__visual {
    position: absolute;
    top: 0;
    right: -44px;
    bottom: auto;
    width: 190px;
    height: 118px;
    opacity: .11;
  }

  .workspace-sheet-hero__content,
  .workspace-sheet-hero-copy {
    padding-right: 34px;
  }

  .workspace-sheet-hero__eyebrow,
  .workspace-sheet-hero-eyebrow {
    font-size: 12px;
  }

  .workspace-sheet-hero__title,
  .workspace-sheet-hero h1 {
    margin-top: 6px;
    font-size: clamp(28px, 9vw, 34px);
  }

  .workspace-sheet-hero__chart-switch {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .workspace-sheet-hero__metadata,
  .workspace-sheet-hero-subtitle {
    font-size: 15px;
  }

  .workspace-sheet-hero__facts,
  .workspace-sheet-hero-facts {
    display: flex;
    gap: 5px 8px;
    font-size: 14px;
  }

  .workspace-sheet-hero__fact,
  .workspace-sheet-hero-fact {
    min-width: 0;
  }

  .workspace-sheet-hero__actions,
  .workspace-sheet-hero-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  .workspace-sheet-hero__control,
  .workspace-sheet-hero-control {
    width: 100%;
    max-width: none;
    min-height: 44px;
  }

  .workspace-sheet-hero__control.is-icon-only,
  .workspace-sheet-hero-control.is-icon-only {
    width: 44px;
  }

  .workspace-sheet-hero__actions > :nth-last-child(n+3):first-child,
  .workspace-sheet-hero__actions > :nth-last-child(n+3):first-child ~ :not(.is-icon-only) {
    grid-column: 1 / -1;
  }

  .workspace-sheet-hero[data-sheet-theme="varshaphala"] .workspace-sheet-hero__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-sheet-hero[data-sheet-theme="varshaphala"] .workspace-sheet-hero__actions > * {
    grid-column: auto !important;
  }

  .workspace-sheet-hero[data-sheet-theme="varshaphala"] .workspace-sheet-hero__actions > .is-icon-only {
    justify-self: end;
  }

  .varshaphala-widget:not(.varshaphala-widget-varshaphala-periods) .workspace-widget-body {
    padding: 10px;
  }

  .varshaphala-relation-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .varshaphala-widget:not(.varshaphala-widget-varshaphala-periods) button,
  .varshaphala-filter-row button,
  .varshaphala-chip-row button,
  .varshaphala-tab-row button,
  .varshaphala-factor-list button,
  .varshaphala-relation-table button,
  .varshaphala-relation-links button,
  .varshaphala-planets-table button {
    min-height: 44px;
  }

  .varshaphala-current-periods {
    grid-template-columns: minmax(0, 1fr);
  }

  .varshaphala-period-strip {
    overflow-x: auto;
  }

  .varshaphala-period-strip button {
    flex: 0 0 58px;
  }

  .varshaphala-month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .varshaphala-month-grid .varshaphala-year-return {
    grid-column: 1 / -1;
  }
}

/* Varshaphala editorial lower surface, preset v16. */
.varshaphala-widget {
  background: #fdfdfc;
}

.varshaphala-widget:not(.varshaphala-widget-varshaphala-periods) .workspace-widget-body {
  padding: 12px;
  background: #fdfdfc;
}

.varshaphala-factor-list {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid #e3e6e1;
  border-radius: 10px;
  background: #fff;
}

.varshaphala-factor-list > div {
  display: flex;
  min-width: 0;
  min-height: 104px;
  padding: 14px;
  border-right: 1px solid #e8ebe5;
  border-bottom: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 9px;
}

.varshaphala-factor-list > div:last-child {
  border-right: 0;
}

.varshaphala-factor-list dt {
  color: #78827e;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}

.varshaphala-factor-list dd {
  width: 100%;
  color: #2f413a;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
}

.varshaphala-factor-list dd > button,
.varshaphala-factor-list dd:not(:has(button)) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.varshaphala-factor-list dd > button {
  width: 100%;
  min-height: 0 !important;
  padding: 0;
  color: #176f61;
  text-align: left;
}

.varshaphala-factor-marker {
  display: inline-grid;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 999px;
  background: #f0f3ed;
  color: #9a6d2d;
  font-size: 10px;
  font-weight: 600;
}

.varshaphala-factor-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.varshaphala-factor-copy > span {
  overflow-wrap: anywhere;
}

.varshaphala-factor-copy small {
  color: #7b8581;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
}

.varshaphala-method-details,
.varshaphala-saham-more {
  margin-top: 10px;
}

.varshaphala-method-details > summary,
.varshaphala-saham-more > summary {
  width: max-content;
  max-width: 100%;
  color: #176f61;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}

.varshaphala-method-details .varshaphala-varshesha-trace {
  margin-top: 10px;
}

.varshaphala-method-details .varshaphala-varshesha-trace h3 {
  display: none;
}

.varshaphala-highlight-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.varshaphala-highlight-list article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid #e8ebe5;
}

.varshaphala-highlight-list article > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #f3eee4;
  color: #96692b;
  font-size: 10px;
  font-weight: 600;
}

.varshaphala-highlight-list article > div,
.varshaphala-highlight-list article button {
  display: grid;
  min-width: 0;
  justify-items: start;
  gap: 2px;
}

.varshaphala-highlight-list article b {
  color: #74807b;
  font-size: 10px;
  font-weight: 500;
}

.varshaphala-highlight-list article strong {
  color: #2f413a;
  font-size: 12px;
  font-weight: 500;
}

.varshaphala-highlight-list article small {
  color: #77827d;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
}

.varshaphala-highlight-list article button {
  min-height: 0 !important;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.varshaphala-aspect-list,
.varshaphala-saham-list {
  max-height: none;
  gap: 0;
  overflow: visible;
}

.varshaphala-aspect-list > article,
.varshaphala-saham-list > article {
  border: 0;
  border-bottom: 1px solid #e8ebe5;
  border-radius: 0;
  background: transparent;
}

.varshaphala-aspect-list > article:last-child,
.varshaphala-saham-list > article:last-child {
  border-bottom: 0;
}

.varshaphala-aspect-list .varshaphala-list-main,
.varshaphala-saham-list .varshaphala-list-main {
  min-height: 50px !important;
  padding: 8px 2px;
}

.varshaphala-aspect-list .varshaphala-list-main strong,
.varshaphala-saham-list .varshaphala-list-main strong {
  font-size: 12px;
  font-weight: 500;
}

.varshaphala-aspect-list .varshaphala-list-main span,
.varshaphala-saham-list .varshaphala-list-main span {
  font-size: 10px;
  font-weight: 400;
}

.varshaphala-saham-more[open] > summary {
  margin-bottom: 6px;
}

.varshaphala-month-timeline {
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 6px;
  padding: 1px 1px 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.varshaphala-month-timeline button {
  display: grid;
  flex: 0 0 74px;
  min-width: 74px;
  min-height: 52px !important;
  padding: 7px 8px;
  place-content: center;
  gap: 2px;
  border: 1px solid #dfe3dd;
  border-radius: 8px;
  background: #fafaf8;
  color: #42524c;
  text-align: center;
  cursor: pointer;
}

.varshaphala-month-timeline button strong {
  font-size: 12px;
  font-weight: 600;
}

.varshaphala-month-timeline button span {
  color: #7a8580;
  font-size: 9px;
  font-weight: 400;
  white-space: nowrap;
}

.varshaphala-month-timeline button[aria-pressed="true"] {
  border-color: #176f61;
  background: #176f61;
  color: #fff;
}

.varshaphala-month-timeline button[aria-pressed="true"] span {
  color: rgba(255, 255, 255, .75);
}

.varshaphala-month-summary {
  display: grid;
  grid-template-columns: minmax(120px, .7fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid #e3e6e1;
  border-radius: 10px;
  background: #fff;
}

.varshaphala-month-summary > div {
  display: grid;
  gap: 2px;
}

.varshaphala-month-summary > div span,
.varshaphala-month-summary dt {
  color: #7b8581;
  font-size: 9px;
  font-weight: 500;
}

.varshaphala-month-summary > div strong {
  color: #2f413a;
  font-size: 15px;
  font-weight: 600;
}

.varshaphala-month-summary dl {
  display: flex;
  min-width: 0;
  margin: 0;
  gap: 12px 22px;
  flex-wrap: wrap;
}

.varshaphala-month-summary dl > div {
  display: grid;
  gap: 2px;
}

.varshaphala-month-summary dd {
  margin: 0;
  color: #42524c;
  font-size: 11px;
  font-weight: 400;
}

.varshaphala-month-summary > button {
  min-height: 36px !important;
  padding: 7px 10px;
  border: 1px solid #d8ddd6;
  border-radius: 8px;
  background: #fafaf8;
  color: #176f61;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.varshaphala-planet-strength-panel .planet-strength-annual-tabs {
  margin-bottom: 6px;
}

.varshaphala-planet-strength-panel .planet-strength-row {
  min-height: 50px;
}

@media (max-width: 1180px) and (min-width: 621px) {
  .varshaphala-factor-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .varshaphala-factor-list > div:nth-child(3) {
    border-right: 0;
  }

  .varshaphala-factor-list > div:nth-child(-n+3) {
    border-bottom: 1px solid #e8ebe5;
  }
}

@media (max-width: 620px) {
  .varshaphala-factor-list,
  .varshaphala-highlight-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .varshaphala-factor-list > div {
    min-height: 0;
    padding: 11px;
    border-right: 0;
    border-bottom: 1px solid #e8ebe5;
  }

  .varshaphala-factor-list > div:last-child {
    border-bottom: 0;
  }

  .varshaphala-month-summary {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: 11px;
  }

  .varshaphala-month-summary dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 12px;
  }

  .varshaphala-month-summary > button {
    width: 100%;
    white-space: normal;
  }
}

/* Subscription plans: config-driven product surface, 2026-08-25. */
.subscription-page {
  width: 100%;
}

[data-subscription-view-root] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.subscription-shell {
  box-sizing: border-box;
  width: calc(100% - 20px);
  max-width: 1160px;
  min-width: 0;
  margin-inline: auto;
  padding: 6px 0 48px;
}

.subscription-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 6px 2px 22px;
}

.subscription-eyebrow {
  margin: 0 0 5px;
  color: var(--gold-strong);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.subscription-heading h1 {
  margin: 0;
  color: var(--vs-account-ink);
  font-family: Literata, Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-weight: 600;
  line-height: 1.08;
}

.subscription-heading > div:first-child > p:last-child {
  margin: 8px 0 0;
  color: var(--vs-account-muted);
  font-size: .9rem;
}

.subscription-current-summary {
  display: grid;
  flex: 0 0 auto;
  min-width: 205px;
  gap: 2px;
  padding: 13px 16px;
  border: 1px solid var(--vs-account-line);
  border-radius: 13px;
  background: rgba(255, 253, 247, .74);
}

.subscription-current-summary small,
.subscription-current-summary span {
  color: var(--vs-account-muted);
  font-size: .7rem;
}

.subscription-current-summary strong {
  color: var(--vs-account-ink);
  font-size: .94rem;
}

.subscription-billing-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin-bottom: 24px;
}

.subscription-billing-row > small {
  max-width: 480px;
  margin-left: auto;
  color: var(--vs-account-muted);
  font-size: .69rem;
  line-height: 1.35;
  text-align: right;
}

.subscription-billing-switch {
  box-sizing: border-box;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--vs-account-line);
  border-radius: 10px;
  background: rgba(236, 238, 231, .72);
}

.subscription-billing-switch button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--vs-account-muted);
  font: inherit;
  font-size: .75rem;
  font-weight: 780;
  cursor: pointer;
}

.subscription-billing-switch button[aria-checked="true"] {
  background: #fffdf8;
  color: var(--vs-account-ink);
  box-shadow: 0 1px 4px rgba(31, 46, 43, .09);
}

.subscription-discount,
.subscription-plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(180, 127, 45, .11);
  color: var(--gold-strong);
  font-size: .65rem;
  font-weight: 850;
}

.subscription-section-title {
  margin: 0 0 11px 2px;
  color: var(--vs-account-ink);
  font-size: .84rem;
  font-weight: 820;
}

.subscription-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.subscription-plan-card {
  display: flex;
  min-width: 0;
  min-height: 410px;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--vs-account-line);
  border-radius: 16px;
  background: rgba(255, 253, 248, .84);
  box-shadow: 0 8px 22px rgba(33, 49, 44, .045);
}

.subscription-plan-card.is-recommended {
  border-color: rgba(27, 105, 99, .52);
  box-shadow: inset 0 3px 0 rgba(27, 105, 99, .76), 0 9px 24px rgba(33, 49, 44, .06);
}

.subscription-plan-card.is-current {
  background: linear-gradient(180deg, rgba(241, 248, 243, .94), rgba(255, 253, 248, .9));
}

.subscription-plan-card header > div {
  display: flex;
  min-height: 30px;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.subscription-plan-card h2 {
  order: -1;
  flex: 1 0 100%;
  margin: 0;
  color: var(--vs-account-ink);
  font-family: Literata, Georgia, serif;
  font-size: 1.22rem;
  font-weight: 600;
}

.subscription-plan-card header p {
  min-height: 42px;
  margin: 7px 0 0;
  color: var(--vs-account-muted);
  font-size: .75rem;
  line-height: 1.42;
}

.subscription-plan-price {
  display: grid;
  min-height: 67px;
  align-content: center;
  gap: 2px;
  margin: 15px 0 10px;
  padding: 12px 0;
  border-block: 1px solid rgba(48, 67, 61, .1);
}

.subscription-plan-price strong {
  color: var(--vs-account-ink);
  font-size: clamp(2.35rem, 3.2vw, 2.85rem);
  font-weight: 700;
  line-height: 1;
}

.subscription-plan-price small {
  color: var(--vs-account-muted);
  font-size: .67rem;
}

.subscription-plan-price span {
  color: var(--vs-account-muted);
  font-size: .69rem;
}

.subscription-plan-card ul {
  display: grid;
  gap: 9px;
  margin: 4px 0 18px;
  padding: 0;
  list-style: none;
}

.subscription-plan-card li {
  display: block;
  color: var(--vs-account-ink);
  font-size: .73rem;
  line-height: 1.35;
}

.subscription-plan-card li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 9px 2px 0;
  border-radius: 50%;
  background: rgba(27, 105, 99, .55);
}

.subscription-plan-badge.is-current {
  background: rgba(27, 105, 99, .1);
  color: var(--teal);
}

.subscription-plan-action {
  width: 100%;
  min-height: 40px;
  margin-top: auto;
  border: 1px solid rgba(27, 105, 99, .38);
  border-radius: 9px;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-size: .76rem;
  font-weight: 820;
}

.subscription-plan-card.is-current .subscription-plan-action {
  background: rgba(27, 105, 99, .08);
}

.subscription-plan-action:disabled {
  cursor: default;
  opacity: .82;
}

.subscription-comparison {
  min-width: 0;
  max-width: 100%;
  margin: 16px 0 24px;
  overflow: hidden;
}

.subscription-comparison > [data-subscription-comparison-panel] {
  min-width: 0;
  max-width: 100%;
}

.subscription-comparison-toggle {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--vs-account-line);
  border-radius: 9px;
  background: rgba(255, 253, 248, .66);
  color: var(--vs-account-ink);
  font: inherit;
  font-size: .74rem;
  font-weight: 790;
  cursor: pointer;
}

.subscription-comparison-toggle[aria-expanded="true"] span {
  transform: rotate(180deg);
}

.subscription-comparison-scroll {
  max-width: 100%;
  margin-top: 10px;
  overflow-x: auto;
  border: 1px solid var(--vs-account-line);
  border-radius: 12px;
  background: rgba(255, 253, 248, .76);
}

.subscription-comparison table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: .71rem;
}

.subscription-comparison th,
.subscription-comparison td {
  padding: 11px 13px;
  border-bottom: 1px solid rgba(48, 67, 61, .1);
  text-align: left;
}

.subscription-comparison thead th {
  background: rgba(236, 238, 231, .58);
  color: var(--vs-account-ink);
}

.subscription-comparison tbody th {
  color: var(--vs-account-muted);
  font-weight: 760;
}

.subscription-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(250px, .8fr);
  gap: 13px;
}

.subscription-usage-card,
.subscription-management-card,
.subscription-inline-error {
  min-width: 0;
  padding: 19px 20px;
  border: 1px solid var(--vs-account-line);
  border-radius: 14px;
  background: rgba(255, 253, 248, .78);
}

.subscription-usage-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.subscription-usage-card h2,
.subscription-management-card h2,
.subscription-inline-error h2 {
  margin: 0;
  color: var(--vs-account-ink);
  font-size: .93rem;
}

.subscription-usage-card > header > span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(27, 105, 99, .08);
  color: var(--teal);
  font-size: .66rem;
  font-weight: 800;
}

.subscription-usage-card dl {
  display: grid;
  gap: 12px;
  margin: 17px 0 0;
}

.subscription-usage-row > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.subscription-usage-row dt,
.subscription-usage-row dd {
  margin: 0;
  font-size: .73rem;
}

.subscription-usage-row dt { color: var(--vs-account-muted); }
.subscription-usage-row dd { color: var(--vs-account-ink); font-weight: 800; text-align: right; }

.subscription-usage-track {
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(55, 72, 65, .11);
}

.subscription-usage-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.subscription-management-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.subscription-management-card > p:not(.subscription-eyebrow),
.subscription-inline-error p {
  margin: 9px 0 18px;
  color: var(--vs-account-muted);
  font-size: .72rem;
  line-height: 1.45;
}

.subscription-management-card .account-secondary-action {
  min-height: 38px;
  margin-top: auto;
  border-radius: 9px;
}

.subscription-inline-error button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--vs-account-line);
  border-radius: 9px;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-weight: 800;
}

.subscription-skeleton {
  display: block;
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(58, 74, 68, .07), rgba(58, 74, 68, .13), rgba(58, 74, 68, .07));
  background-size: 200% 100%;
  animation: subscription-skeleton 1.2s linear infinite;
}

.subscription-skeleton.is-title { width: 210px; height: 38px; }
.subscription-skeleton.is-copy { width: min(380px, 80vw); height: 15px; margin-top: 10px; }
.subscription-skeleton.is-card-title { width: 55%; height: 24px; }
.subscription-skeleton.is-line { width: 100%; height: 12px; margin-top: 17px; }
.subscription-skeleton.is-button { width: 100%; height: 40px; margin-top: auto; }
.subscription-plan-skeleton { min-height: 350px; }

@keyframes subscription-skeleton {
  to { background-position: -200% 0; }
}

@media (max-width: 980px) {
  body[data-account-route="subscription"] .account-main {
    box-sizing: border-box;
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
  }

  body[data-account-route="subscription"] .subscription-page {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .subscription-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subscription-plan-card:last-child { grid-column: 1 / -1; min-height: 350px; }
  .subscription-lower-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .subscription-shell { padding: 0 0 calc(86px + env(safe-area-inset-bottom)); }
  .subscription-heading { display: grid; gap: 14px; padding-bottom: 17px; }
  .subscription-heading h1 { font-size: 1.78rem; }
  .subscription-heading > div:first-child > p:last-child { font-size: .8rem; }
  .subscription-current-summary { width: 100%; min-width: 0; }
  .subscription-billing-row { align-items: flex-start; flex-wrap: wrap; margin-bottom: 19px; }
  .subscription-billing-switch { width: 100%; }
  .subscription-billing-switch button { flex: 1 1 50%; padding-inline: 8px; }
  .subscription-billing-row > small { width: 100%; margin-left: 0; text-align: left; }
  .subscription-plan-grid { grid-template-columns: 1fr; gap: 10px; }
  .subscription-plan-card,
  .subscription-plan-card:last-child { grid-column: auto; min-height: 385px; padding: 17px; }
  .subscription-plan-card header p { min-height: 0; }
  .subscription-comparison { margin-block: 13px 20px; }
  .subscription-comparison-toggle { width: 100%; justify-content: space-between; }
  .subscription-usage-card,
  .subscription-management-card { padding: 17px; }
}

@media (max-height: 430px) and (orientation: landscape) {
  .subscription-shell { padding-bottom: 24px; }
  .subscription-heading { align-items: center; padding-bottom: 12px; }
  .subscription-heading h1 { font-size: 1.55rem; }
  .subscription-current-summary { padding-block: 9px; }
  .subscription-plan-grid { grid-template-columns: 1fr; }
  .subscription-plan-card,
  .subscription-plan-card:last-child { grid-column: auto; min-height: 350px; }
}

/* Overview widgets own no vertical scroll: the workspace page grows with them. */
.account-app .workspace-page .workspace-row:has(> .workspace-widget.planet-strength-panel) {
  grid-auto-rows: auto !important;
}

.account-app .workspace-page .workspace-row > .workspace-widget.planet-strength-panel {
  align-self: start;
  height: auto;
  min-height: 0;
  grid-template-rows: var(--workspace-widget-header-height, 48px) auto;
}

.account-app .workspace-page .workspace-widget.planet-strength-panel > .workspace-widget-body {
  min-height: 0;
  overflow: visible;
}

@media (max-width: 900px) and (max-height: 500px) {
  .workspace-sheet-bar,
  .workspace-sheet-bar.workspace-unified-tabbar {
    position: static !important;
    top: auto !important;
  }

  .workspace-sheet-tabs [data-workspace-section],
  #workspace-panel-main .varshaphala-widget:not(.varshaphala-widget-varshaphala-periods) button,
  #workspace-panel-main [data-varshaphala-sheet-header] button {
    min-height: 44px !important;
  }
}

/* Account v1: the release exposes only the two managed system sheets. */
.workspace-sheet-add[hidden] {
  display: none !important;
}

/* Varshaphala v7: standard widget surfaces and controls live outside charts. */
.varshaphala-widget {
  background: var(--workspace-widget-surface, #fffdf8);
}

.varshaphala-period-header-controls {
  min-width: 0;
}

.varshaphala-period-source {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--vs-account-line);
  border-radius: 9px;
  color: var(--vs-account-muted);
  font-size: 12px;
  white-space: nowrap;
}

.chart-widget:has(.varshaphala-chart-contextbar) .workspace-widget-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.chart-widget:has(.varshaphala-chart-contextbar) .workspace-widget-body > .chart-viewer {
  min-height: 0;
  height: 100% !important;
}

.varshaphala-chart-contextbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px;
  border-top: 1px solid var(--vs-account-line);
  background: var(--workspace-widget-surface, #fffdf8);
}

.varshaphala-chart-contextbar > span {
  margin-right: auto;
  color: var(--vs-account-muted);
  font-size: 12px;
  font-weight: 650;
}

.varshaphala-chart-contextbar button {
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--vs-account-line);
  border-radius: 8px;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  font-size: 12px;
}

.varshaphala-chart-contextbar button .varshaphala-crown-icon {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 5px;
  vertical-align: -4px;
}

@media (min-width: 1181px) {
  .workspace-row[data-workspace-row="varsha-row-2"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-items: start;
  }

  .workspace-row[data-workspace-row="varsha-row-2"] > [data-widget-id="varsha-overview"],
  .workspace-row[data-workspace-row="varsha-row-5"] > [data-widget-id="varsha-months"] {
    grid-column: 1 / -1 !important;
  }

  .workspace-row[data-workspace-row="varsha-row-3"],
  .workspace-row[data-workspace-row="varsha-row-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-items: start;
  }

  .workspace-row[data-workspace-row="varsha-row-3"] > [data-widget-id="varsha-strength"] {
    grid-column: span 1 !important;
  }

  .workspace-row[data-workspace-row="varsha-row-5"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-items: start;
  }

  .workspace-row[data-workspace-row="varsha-row-2"] > .workspace-widget,
  .workspace-row[data-workspace-row="varsha-row-3"] > .workspace-widget,
  .workspace-row[data-workspace-row="varsha-row-4"] > .workspace-widget,
  .workspace-row[data-workspace-row="varsha-row-5"] > .workspace-widget {
    height: auto;
  }
}

@media (max-width: 620px) {
  .varshaphala-period-source {
    display: none;
  }

  .varshaphala-period-header-controls,
  .varshaphala-period-header-controls .period-widget-system-control,
  .varshaphala-period-header-controls select {
    min-width: 0;
    width: 100%;
  }

  .varshaphala-chart-contextbar {
    padding: 7px 8px;
  }

  .varshaphala-chart-contextbar > span {
    flex-basis: 100%;
  }
}

.workspace-unified-tabbar .workspace-section-tab {
  position: static;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: .76;
}

.workspace-unified-tabbar .workspace-section-tab > [role="tab"] {
  min-height: 42px;
  padding: 0 12px;
  white-space: nowrap;
}

.workspace-unified-tabbar .workspace-section-tab:hover,
.workspace-unified-tabbar .workspace-section-tab.is-active {
  border: 0 !important;
  background: transparent !important;
  color: var(--vs-account-ink);
  opacity: 1;
}

.workspace-unified-tabbar .workspace-section-tab.is-active::after {
  display: block !important;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  border-radius: 99px 99px 0 0;
  background: var(--vs-account-accent, #315d57);
  content: "" !important;
}

/* Calculation loading/error surface: internal contracts never leak into UI. */
.chart-data-message {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  display: grid;
  gap: 10px;
  width: min(82%, 280px);
  padding: 14px 16px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(130, 92, 51, .2);
  border-radius: 10px;
  background: rgba(255, 252, 245, .96);
  box-shadow: 0 8px 24px rgba(41, 31, 23, .1);
  color: #574a40;
  font-size: .8rem;
  line-height: 1.35;
  text-align: center;
}

.chart-data-message button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--vs-account-accent, #315d57) 45%, transparent);
  border-radius: 8px;
  background: transparent;
  color: var(--vs-account-accent, #315d57);
  font: inherit;
  font-weight: 700;
}

.chart-viewer:not([data-calculation-state="ready"]) .chart-stage {
  min-height: 360px;
  background: linear-gradient(110deg, rgba(49, 93, 87, .035) 22%, rgba(49, 93, 87, .09) 38%, rgba(49, 93, 87, .035) 54%);
  background-size: 220% 100%;
}

.chart-viewer:not([data-calculation-state="ready"]):not([data-retain-chart-during-loading="true"]) .chart-stage > :not(.chart-data-message) {
  visibility: hidden !important;
}

.chart-viewer[data-calculation-state="loading"][data-retain-chart-during-loading="true"] .chart-stage > :not(.chart-data-message) {
  pointer-events: none;
}

.chart-viewer[data-calculation-state="loading"][data-retain-chart-during-loading="true"] .chart-stage[data-style="south"] > .south-chart,
.chart-viewer[data-calculation-state="loading"][data-retain-chart-during-loading="true"] .chart-stage[data-style="north"] > .north-chart,
.chart-viewer[data-calculation-state="loading"][data-retain-chart-during-loading="true"] .chart-stage[data-style="nabhasa"] > .nabhasa-chart,
.chart-viewer[data-calculation-state="loading"][data-retain-chart-during-loading="true"] .chart-stage[data-style="south"][data-rings-visible="true"] > .astro-rings {
  opacity: .42;
}

.chart-viewer[data-calculation-state="loading"][data-retain-chart-during-loading="true"] .chart-stage {
  min-height: 0;
}

.chart-viewer[data-calculation-state="loading"] .chart-stage {
  animation: chart-calculation-skeleton 1.3s linear infinite;
}

/* Today keeps the previous transit chart visible while the next day is
   calculated. A quiet status pill replaces the generic animated skeleton so
   day navigation never flashes a decorative background over the chart. */
.today-transit-chart[data-calculation-state="loading"] .chart-stage {
  background: var(--today-paper, #fffdf8);
  animation: none;
}

.today-transit-chart[data-calculation-state="loading"][data-retain-chart-during-loading="true"] .chart-stage[data-style="south"] > .south-chart,
.today-transit-chart[data-calculation-state="loading"][data-retain-chart-during-loading="true"] .chart-stage[data-style="north"] > .north-chart,
.today-transit-chart[data-calculation-state="loading"][data-retain-chart-during-loading="true"] .chart-stage[data-style="nabhasa"] > .nabhasa-chart,
.today-transit-chart[data-calculation-state="loading"][data-retain-chart-during-loading="true"] .chart-stage[data-style="south"][data-rings-visible="true"] > .astro-rings {
  opacity: 1;
  filter: none;
}

.today-transit-chart[data-calculation-state="loading"] .chart-data-message {
  width: auto;
  max-width: calc(100% - 32px);
  padding: 8px 13px;
  gap: 0;
  border-color: color-mix(in srgb, var(--today-green, #17695f) 18%, transparent);
  border-radius: 999px;
  background: var(--today-paper, #fffdf8);
  box-shadow: 0 8px 26px rgb(17 40 34 / 13%);
  color: var(--today-ink, #172721);
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
}

.workspace-unified-tabbar .workspace-sync-indicator {
  position: absolute;
  z-index: 32;
  top: calc(100% + 4px);
  right: 4px;
  width: min(420px, calc(100% - 8px));
  box-sizing: border-box;
}

@keyframes chart-calculation-skeleton {
  to { background-position-x: -220%; }
}

.workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header]:not(:has(.workspace-sheet-add:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr) minmax(58px, 68px) !important;
}

@media (max-width: 760px) {
  .workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header]:not(:has(.workspace-sheet-add:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr) 58px !important;
  }
}

/* R5 final cascade guard: legacy component layers above intentionally remain
   untouched; these mobile hit areas and narrow chart geometry are canonical. */
@media (max-width: 820px) {
  .charts-page {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .charts-page > div,
  .cards-page--mobile,
  .cards-page--desktop {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .account-icon-button,
  .account-global-search-mobile-trigger,
  .workspace-sheet-add,
  .workspace-widget-drag-handle,
  .workspace-widget-actions button,
  .workspace-widget [data-open-widget-action-menu],
  .workspace-chart-widget-header button,
  .cards-library-add-folder {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .account-profile-button,
  .account-mobile-nav a,
  .account-mobile-nav button,
  .workspace-sheet-mobile-trigger,
  .workspace-sheet-add,
  .workspace-edit-mode-toggle,
  [data-workspace-edit-toggle],
  .workspace-chart-varga-control select,
  .cards-library-filter,
  .cards-library-folder-chip,
  .cards-library-folder-select,
  .cards-library-folder-menu,
  .cards-source-tabs button,
  .cards-mobile-folder select,
  .cards-mobile-controls button {
    min-height: 44px !important;
  }

  .cards-library-folder-select {
    padding-right: 48px;
  }

  .cards-library-folder-menu {
    width: 44px !important;
    min-width: 44px !important;
  }

  .account-app .workspace-page .workspace-widget:not(.yogas-widget) > .workspace-widget-header,
  .account-app .workspace-page .workspace-widget > .workspace-chart-widget-header {
    min-height: 48px !important;
    height: auto !important;
    grid-template-rows: minmax(44px, auto) !important;
  }

  .workspace-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .workspace-widget {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 820px) and (hover: none),
       (max-width: 820px) and (pointer: coarse) {
  .cards-library-folder-menu {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 430px) {
  .workspace-page .workspace-widget.workspace-widget-chart {
    --workspace-widget-header-height: 90px;
    grid-template-rows: 90px minmax(0, 1fr) !important;
  }

  .account-app .workspace-page .workspace-widget > .workspace-chart-widget-header {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    grid-template-rows: 44px 44px !important;
    min-height: 90px !important;
    height: 90px !important;
    overflow: visible !important;
  }

  .workspace-chart-widget-header > .workspace-widget-drag-handle {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .workspace-chart-widget-header > .workspace-widget-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .workspace-page .workspace-chart-widget-header .workspace-chart-header-controls {
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    inset: auto !important;
    display: flex !important;
    gap: 3px;
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    pointer-events: auto;
  }

  .workspace-chart-varga-control {
    position: static !important;
    flex: 1 1 92px;
    width: auto !important;
    min-width: 76px;
    transform: none !important;
  }

  .workspace-chart-varga-control select {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 16px;
  }

  .workspace-chart-source-control,
  .workspace-chart-context-control,
  .workspace-chart-source-control select,
  .workspace-chart-context-control select,
  button.workspace-chart-context-control {
    height: 44px !important;
    min-height: 44px !important;
  }

  .workspace-chart-source-control select,
  .workspace-chart-context-control select,
  button.workspace-chart-context-control {
    font-size: 16px;
  }

  .workspace-chart-header-controls > button {
    flex: 0 0 44px;
  }
}
.cards-migration-notice {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(23, 49, 45, .16);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(255, 252, 245, .78);
}
.cards-migration-notice strong { font-size: .84rem; }
.cards-migration-notice span { color: var(--ink-soft); font-size: .76rem; line-height: 1.45; }

/* Settings / Calculations: one quiet, server-backed profile surface. */
.settings-page {
  max-width: 980px;
  margin-inline: auto;
}

.calculation-settings-page {
  display: grid;
  gap: 24px;
  max-width: 860px;
}

.calculation-settings-progress {
  min-height: 22px;
  margin: 0;
  color: var(--ink-soft);
  font-size: .82rem;
}

.calculation-settings-progress:empty { display: none; }

.calculation-settings-group {
  overflow: hidden;
  border-block: 1px solid rgba(23, 49, 45, .14);
}

.calculation-settings-group h2 {
  margin: 0;
  padding: 18px 0 10px;
  color: var(--ink-soft);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.calculation-setting-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, auto);
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 13px 0;
  border-top: 1px solid rgba(23, 49, 45, .09);
}

.calculation-setting-row > div:first-child {
  display: grid;
  gap: 4px;
}

.calculation-setting-row strong { color: var(--ink); font-size: .94rem; }
.calculation-setting-row small { color: var(--ink-soft); font-size: .78rem; line-height: 1.4; }

.calculation-setting-row select {
  min-width: 236px;
  min-height: 44px;
  padding: 0 38px 0 13px;
  border: 1px solid rgba(23, 49, 45, .18);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .7);
  font: inherit;
}

.calculation-setting-row[aria-disabled="true"] { opacity: .56; }

.calculation-segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(118px, 1fr);
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(23, 49, 45, .14);
  border-radius: 13px;
  background: rgba(23, 49, 45, .055);
}

.calculation-segmented button {
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  color: var(--ink-soft);
  background: transparent;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}

.calculation-segmented button[aria-checked="true"] {
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(23, 49, 45, .09);
}

.calculation-segmented button:focus-visible,
.calculation-setting-row select:focus-visible,
.calculation-settings-reset:focus-visible,
.calculation-settings-dialog button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.calculation-segmented-three { grid-auto-columns: minmax(104px, 1fr); }

.calculation-settings-reset {
  justify-self: start;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--ink-soft);
  background: transparent;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.calculation-settings-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid rgba(23, 49, 45, .16);
  border-radius: 20px;
  color: var(--ink);
  background: #fffdf7;
  box-shadow: 0 24px 80px rgba(12, 35, 31, .24);
}

.calculation-settings-dialog::backdrop { background: rgba(12, 35, 31, .42); }
.calculation-settings-dialog form { display: grid; gap: 14px; padding: 24px; }
.calculation-settings-dialog h2, .calculation-settings-dialog p { margin: 0; }
.calculation-settings-dialog p { color: var(--ink-soft); line-height: 1.55; }
.calculation-settings-dialog form > div { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.calculation-settings-dialog button { min-height: 44px; padding: 0 16px; border: 1px solid rgba(23, 49, 45, .16); border-radius: 11px; color: var(--ink); background: transparent; font: inherit; }
.calculation-settings-dialog button.is-primary { border-color: var(--gold); background: var(--gold); color: #17312d; }

@media (max-width: 700px) {
  .settings-page { width: 100%; }
  .calculation-settings-page { gap: 18px; width: 100%; }
  .calculation-setting-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 15px 0;
  }
  .calculation-setting-row select { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
  .calculation-segmented { width: 100%; grid-auto-columns: minmax(0, 1fr); }
  .calculation-segmented button { min-height: 44px; padding-inline: 8px; }
  .calculation-setting-row-long .calculation-segmented-three { grid-auto-flow: row; grid-auto-columns: 1fr; }
  .calculation-settings-reset { min-height: 48px; margin-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .calculation-settings-dialog { margin-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .calculation-settings-dialog form > div { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Planet positions RC30: one readable order on mobile and desktop. */
.planet-table-panel .planet-table-wrap {
  --planet-table-graha-width: 112px;
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.planet-table-scroll-hint {
  display: none;
}

.planet-table-panel .planet-table-wrap > table {
  width: 100%;
  max-width: none;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.planet-table-panel .planet-table-wrap.has-optional-columns > table {
  min-width: max(100%, calc(var(--planet-table-column-count) * 120px));
}

.planet-table-panel .planet-table-col-graha { width: var(--planet-table-graha-width); }
.planet-table-panel .planet-table-col-karaka { width: 8%; }
.planet-table-panel .planet-table-col-house { width: 6%; }
.planet-table-panel .planet-table-col-degree { width: 10%; }
.planet-table-panel .planet-table-col-sign { width: 15%; }
.planet-table-panel .planet-table-col-nakshatra { width: 19%; }
.planet-table-panel .planet-table-col-pada { width: 9%; }
.planet-table-panel .planet-table-col-ruled-houses { width: calc(33% - var(--planet-table-graha-width)); }
.planet-table-panel .planet-table-col-optional { width: 120px; }

.planet-table-panel .planet-table-wrap :is(th, td) {
  box-sizing: border-box;
  width: auto !important;
  min-width: 0;
  height: 42px;
  padding: 8px 6px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  vertical-align: middle;
}

.planet-table-panel .planet-table-wrap th {
  height: 40px;
  background: color-mix(in srgb, var(--workspace-inset-surface) 72%, var(--workspace-widget-surface));
  white-space: nowrap;
}

.planet-table-panel .planet-table-wrap [data-planet-table-sort] {
  justify-content: flex-start;
  white-space: nowrap;
}

.planet-table-panel .planet-table-jaimini-head,
.planet-table-panel .planet-table-jaimini-cell,
.planet-table-panel .planet-table-house-head,
.planet-table-panel .planet-table-house-cell,
.planet-table-panel .planet-table-pada-head,
.planet-table-panel .planet-table-pada-cell,
.planet-table-panel .planet-table-ruled-houses-head,
.planet-table-panel .planet-table-ruled-houses-cell {
  text-align: center;
}

.planet-table-panel .planet-table-degree-head,
.planet-table-panel .planet-table-degree-cell,
.planet-table-panel .planet-table-sign-head,
.planet-table-panel .planet-table-sign-cell,
.planet-table-panel .planet-table-nakshatra-head,
.planet-table-panel .planet-table-nakshatra-cell {
  text-align: right;
}

.planet-table-panel .planet-table-wrap :is(
  .planet-table-degree-head,
  .planet-table-sign-head,
  .planet-table-nakshatra-head
) [data-planet-table-sort] {
  justify-content: flex-end;
  text-align: right;
}

.planet-table-panel .planet-table-wrap :is(
  .planet-table-house-head,
  .planet-table-pada-head,
  .planet-table-ruled-houses-head
) [data-planet-table-sort] {
  justify-content: center;
}

.planet-table-panel .planet-table-degree-cell,
.planet-table-panel .planet-table-house-cell,
.planet-table-panel .planet-table-pada-cell,
.planet-table-panel .planet-table-ruled-houses-cell {
  font-variant-numeric: tabular-nums;
}

.planet-table-sign-value,
.planet-table-nakshatra-value,
.planet-table-pada-value {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: inherit;
  gap: 3px;
  white-space: nowrap;
}

.planet-table-panel .planet-table-jaimini-cell .jaimini-karaka-token {
  width: auto;
  min-width: 30px;
  min-height: 24px;
  padding: 2px 5px;
  border: 0;
  border-radius: 5px;
  background: color-mix(in srgb, var(--vs-account-gold) 9%, transparent);
  box-shadow: none;
}

@media (max-width: 760px) {
  .planet-table-panel {
    scroll-margin-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .planet-table-panel .planet-table-wrap {
    --planet-table-graha-width: 108px;
  }

  .planet-table-panel .planet-table-wrap > table {
    width: 916px !important;
    min-width: 916px !important;
    table-layout: fixed !important;
  }

  .planet-table-panel .planet-table-wrap.has-optional-columns > table {
    width: max(916px, calc(var(--planet-table-column-count) * 120px)) !important;
    min-width: max(916px, calc(var(--planet-table-column-count) * 120px)) !important;
  }

  .planet-table-panel .planet-table-wrap :is(th, td) {
    height: 44px;
    padding: 7px 7px;
    font-size: 12.5px;
    line-height: 1.2;
  }

  .planet-table-panel .planet-table-wrap th {
    position: sticky;
    z-index: 3;
    top: 0;
    height: 42px;
    font-size: 11.5px;
  }

  .planet-table-panel .planet-table-wrap :is(th, td):first-child {
    position: sticky;
    z-index: 2;
    left: 0;
    width: 108px !important;
    min-width: 108px;
    background: var(--vs-account-surface-solid, #fffdf7);
    box-shadow: 1px 0 0 var(--vs-account-line), 8px 0 14px rgba(23, 49, 45, .035);
  }

  .planet-table-panel .planet-table-wrap thead th:first-child {
    z-index: 5;
  }

  .planet-table-panel .planet-table-wrap tbody tr:hover .planet-table-graha-cell {
    background: var(--vs-account-surface-solid, #fffdf7);
  }

  .planet-table-panel .planet-table-jaimini-cell .jaimini-karaka-token {
    min-height: 24px;
    padding-inline: 5px;
    font-size: 11.5px;
  }

  .planet-table-panel .planet-table-wrap th:nth-child(8) [data-planet-table-sort] {
    font-size: 10.5px;
  }
}

/* Compact premium chart header / analytical header -----------------------
   Title, navigation and summary are siblings in one render tree. */
.workspace-sheet-hero-host {
  display: block !important;
  padding-bottom: var(--workspace-grid-gap, 6px);
}

.workspace-sheet-hero {
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  grid-template-areas: "content navigation";
  gap: 22px;
  min-height: 116px;
  height: auto;
  padding: 17px 21px;
  border-color: rgba(37, 55, 48, .14);
  border-radius: 15px;
  background: linear-gradient(118deg, #fcfaf3 0%, #f8f7f0 100%);
  box-shadow: 0 5px 16px rgba(34, 49, 42, .035);
}

.workspace-sheet-hero__content,
.workspace-sheet-hero-copy {
  align-self: center;
  padding: 0;
}

.workspace-sheet-hero__title-row {
  gap: 7px;
}

.workspace-sheet-hero__title,
.workspace-sheet-hero h1 {
  margin: 0;
  font-size: clamp(28px, 2.1vw, 34px);
  font-weight: 560;
  line-height: 1.08;
}

.workspace-sheet-hero__chart-switch {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: #66736e;
  transition: color 150ms ease, background-color 150ms ease;
}

.workspace-sheet-hero__chart-switch:hover,
.workspace-sheet-hero__chart-switch:focus-visible,
.workspace-sheet-hero__chart-switch[aria-expanded="true"] {
  border-color: transparent;
  background: color-mix(in srgb, var(--sheet-hero-accent-soft) 58%, transparent);
  color: var(--sheet-hero-accent);
}

.workspace-sheet-hero__chart-switch svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.65;
}

.workspace-sheet-hero__metadata,
.workspace-sheet-hero-subtitle {
  max-width: 100%;
  margin-top: 5px;
  overflow: hidden;
  color: #66726d;
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-sheet-hero__facts,
.workspace-sheet-hero-facts {
  flex-wrap: nowrap;
  gap: 22px;
  margin-top: 8px;
  font-size: 14px;
}

.workspace-sheet-hero__fact.is-zodiac,
.workspace-sheet-hero-fact.is-zodiac {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.workspace-sheet-hero__fact-label {
  color: #7b8580;
  font: 650 10px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .1em;
}

.workspace-sheet-hero__fact-value {
  color: #263a33;
  font: 650 14px/1.2 Inter, system-ui, sans-serif;
}

.workspace-sheet-hero > .workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header] {
  grid-area: navigation;
  position: static;
  z-index: 3;
  top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: transparent;
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-sheet-tabs {
  display: flex !important;
  flex: 0 1 auto;
  align-items: stretch;
  justify-content: flex-end;
  gap: 20px;
  min-width: 0;
  min-height: 42px;
  overflow: visible;
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab {
  flex: 0 0 auto;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  padding: 0;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #64716c;
  opacity: 1;
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab > [role="tab"] {
  position: relative;
  min-height: 42px;
  height: 42px;
  padding: 0;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit;
  font: 600 14px/42px Inter, system-ui, sans-serif;
  white-space: nowrap;
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab:hover {
  color: #29483f;
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab.is-active {
  color: var(--sheet-hero-accent);
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab.is-active::after {
  right: 0;
  bottom: 1px;
  left: 0;
  height: 2px;
  background: var(--sheet-hero-accent);
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-sheet-add {
  display: none !important;
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-edit-mode-control {
  display: flex;
  flex: 0 0 auto;
  grid-column: auto;
  margin-left: 4px;
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-sync-indicator[hidden] {
  display: none !important;
}

.workspace-sheet-hero:has(> .workspace-sheet-hero__actions) {
  grid-template-areas:
    "content navigation"
    "actions actions";
}

.workspace-sheet-hero > .workspace-sheet-hero__actions {
  grid-area: actions;
  position: static;
  inset: auto;
  align-self: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
}

@media (max-width: 1120px) {
  .workspace-sheet-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "content" "navigation";
    gap: 10px;
    min-height: 0;
    padding: 16px 19px 13px;
  }

  .workspace-sheet-hero:has(> .workspace-sheet-hero__actions) {
    grid-template-areas: "content" "actions" "navigation";
  }

  .workspace-sheet-hero > .workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header] {
    justify-content: flex-start;
    min-height: 42px;
  }

  .workspace-sheet-hero > .workspace-unified-tabbar .workspace-sheet-tabs {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .workspace-sheet-hero {
    gap: 9px;
    padding: 14px 14px 10px;
    border-radius: 13px;
  }

  .workspace-sheet-hero__content,
  .workspace-sheet-hero-copy {
    padding-right: 0;
  }

  .workspace-sheet-hero__title,
  .workspace-sheet-hero h1 {
    font-size: clamp(25px, 7.4vw, 30px);
  }

  .workspace-sheet-hero__chart-switch {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .workspace-sheet-hero__metadata,
  .workspace-sheet-hero-subtitle {
    margin-top: 3px;
    font-size: 13px;
  }

  .workspace-sheet-hero__facts,
  .workspace-sheet-hero-facts {
    gap: 16px;
    margin-top: 7px;
  }

  .workspace-sheet-hero > .workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header] {
    display: flex;
    gap: 7px;
    min-width: 0;
    min-height: 44px;
    overflow: hidden;
  }

  .workspace-sheet-hero > .workspace-unified-tabbar .workspace-sheet-tabs {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 17px;
    min-height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .workspace-sheet-hero > .workspace-unified-tabbar .workspace-sheet-tabs::-webkit-scrollbar {
    display: none;
  }

  .workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab,
  .workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab > [role="tab"] {
    height: 44px;
    min-height: 44px;
    font-size: 13px;
    line-height: 44px;
  }

  .workspace-sheet-hero > .workspace-unified-tabbar .workspace-edit-mode-control {
    margin-left: 0;
  }
}

/* Transit chart moment and divisional controls ------------------------- */
.workspace-widget-chart[data-widget-type="transit-chart"] .workspace-chart-source-control {
  flex: 0 1 30%;
  min-width: 86px;
}

.workspace-widget-chart[data-widget-type="transit-chart"] .workspace-chart-transit-varga-control {
  flex: 0 1 28%;
  min-width: 82px;
}

.workspace-widget-chart[data-widget-type="transit-chart"] .workspace-chart-transit-context {
  flex: 1 1 42%;
  min-width: 116px;
}

.workspace-transit-header-settings {
  display: none;
}

.workspace-widget-chart[data-widget-type="transit-chart"]:has(.chart-viewer[data-chart-style="south"]) .workspace-chart-transit-context {
  flex: 0 0 auto;
  width: 104px;
  min-width: 0;
}

.workspace-widget-chart[data-widget-type="transit-chart"]:has(.chart-viewer[data-chart-style="south"]) .workspace-transit-header-moment {
  display: none;
}

.workspace-widget-chart[data-widget-type="transit-chart"]:has(.chart-viewer[data-chart-style="south"]) .workspace-transit-header-settings {
  display: inline;
}

.workspace-widget-chart[data-widget-type="transit-chart"]:has(.chart-viewer[data-chart-style="south"]) .workspace-chart-transit-context > span:last-child {
  display: none;
}

.account-app .chart-viewer .chart-transit-moment {
  display: none;
}

.account-app .chart-viewer[data-chart-style="south"] .chart-transit-moment {
  display: block;
  margin-top: 5px;
  color: var(--vs-text-secondary);
  font-size: clamp(14px, 2.8cqw, 16px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.workspace-widget-chart[data-widget-type="transit-chart"] .workspace-widget-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.workspace-widget-chart[data-widget-type="transit-chart"] .workspace-widget-body > .chart-viewer {
  min-height: 0;
}

.workspace-transit-time-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  min-width: 0;
  background: var(--workspace-widget-surface);
}

.workspace-transit-time-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 1 1 auto;
  min-width: 0;
  gap: 3px;
}

.workspace-transit-time-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.workspace-transit-time-panel button {
  height: 40px;
  min-width: 0;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--vs-account-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.workspace-transit-time-steps button.is-active {
  background: color-mix(in srgb, var(--workspace-widget-surface) 82%, var(--vs-account-ink));
}

.workspace-transit-time-actions button {
  width: 40px;
  padding: 0;
  border-color: var(--workspace-line);
  background: var(--workspace-widget-surface);
  font-size: 20px;
  line-height: 1;
}

.workspace-transit-time-panel button:hover {
  border-color: var(--workspace-line-hover);
  background: color-mix(in srgb, var(--workspace-widget-surface) 90%, var(--vs-account-ink));
}

.workspace-transit-time-panel button:focus-visible {
  outline: 2px solid var(--workspace-line-active);
  outline-offset: 1px;
}

/* Shared contextual chart contract ---------------------------------------
   Calculation, Varshaphala, Transits and Compatibility use one immutable
   chart viewport. Context controls belong to a sibling footer, so adding a
   label or a quick action never shrinks one chart relative to its neighbour. */
.workspace-widget-chart {
  --workspace-chart-footer-height: 50px;
}

.workspace-widget-chart > .workspace-widget-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}

.workspace-chart-viewport {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.workspace-chart-viewport > .chart-viewer {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.workspace-chart-footer {
  display: none;
  min-width: 0;
  overflow: hidden;
  border-top: 1px solid var(--workspace-line);
  background: var(--workspace-widget-surface, #fffdf8);
}

.workspace-chart-footer:not(:empty),
.workspace-row:has(> .workspace-widget-chart .workspace-chart-footer:not(:empty)) > .workspace-widget-chart .workspace-chart-footer {
  display: flex;
  align-items: stretch;
  min-height: var(--workspace-chart-footer-height);
}

.workspace-chart-footer > :only-child {
  width: 100%;
}

.workspace-chart-footer-reserve {
  display: block;
  min-height: var(--workspace-chart-footer-height);
  pointer-events: none;
}

.workspace-chart-footer .workspace-transit-time-panel,
.workspace-chart-footer .varshaphala-chart-contextbar {
  min-height: var(--workspace-chart-footer-height);
  border-top: 0;
}

.workspace-chart-footer .varshaphala-chart-contextbar {
  flex: 1 1 auto;
  flex-wrap: nowrap;
}

.workspace-chart-footer .varshaphala-chart-selection {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 7px 9px;
  border-left: 1px solid var(--workspace-line);
  color: var(--vs-account-muted);
  font-size: 11px;
  white-space: nowrap;
}

.workspace-chart-footer .varshaphala-chart-selection strong {
  overflow: hidden;
  color: var(--vs-account-ink);
  text-overflow: ellipsis;
}

.workspace-chart-selection-widget > .workspace-widget-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.workspace-chart-viewport--selection,
.workspace-chart-selection-required {
  place-items: center;
}

.workspace-chart-selection-required {
  display: grid;
  gap: 18px;
  width: min(100% - 32px, 390px);
  margin: auto;
  padding: 28px;
  border: 1px solid var(--workspace-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--workspace-widget-surface, #fffdf8) 94%, var(--vs-account-accent));
  text-align: center;
}

.workspace-chart-selection-required strong {
  display: block;
  color: var(--vs-account-ink);
  font: 700 22px/1.15 var(--vs-account-serif, Georgia, serif);
}

.workspace-chart-selection-required p {
  margin: 8px 0 0;
  color: var(--vs-account-muted);
  line-height: 1.45;
}

.workspace-chart-selection-required button {
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid var(--workspace-line-active);
  border-radius: 10px;
  background: transparent;
  color: var(--vs-account-accent);
  font: inherit;
  font-weight: 750;
}

.workspace-chart-selection-required button:hover,
.workspace-chart-selection-required button:focus-visible {
  background: color-mix(in srgb, var(--workspace-widget-surface, #fffdf8) 88%, var(--vs-account-accent));
}

@media (min-width: 901px) {
  .workspace-row[style*="--workspace-columns:3;"]:has(> .workspace-widget-chart .workspace-chart-footer:not(:empty)) {
    grid-auto-rows: min(
      var(--workspace-unit-height),
      calc(33.333cqw + var(--workspace-widget-header-height) + var(--workspace-chart-footer-height, 50px) - 4px)
    ) !important;
  }
}

/* Workspace widget shell standard ---------------------------------------
   One shared shell owns spacing, surface, border and corner geometry.
   Widget internals keep semantic states and their own scroll containers. */
.account-app {
  --workspace-grid-gap: 0px;
  --workspace-widget-padding: 12px;
  --workspace-widget-chart-padding: 0px;
  --workspace-widget-radius: 10px;
  --workspace-widget-divider: #e8ebe5;
}

.account-app .workspace-canvas {
  padding: var(--workspace-grid-gap);
}

.account-app .workspace-rows,
.account-app .workspace-rows:not(:has(> .workspace-row-shell)) {
  row-gap: var(--workspace-grid-gap) !important;
  column-gap: var(--workspace-grid-gap) !important;
}

.account-app .workspace-rows:has(> .workspace-row-shell) {
  row-gap: 0 !important;
  column-gap: 0 !important;
}

.account-app .workspace-row-shell {
  gap: 0;
  margin: 0;
}

.account-app .workspace-row-shell:not(:last-child) {
  margin-block-end: var(--workspace-grid-gap) !important;
}

.account-app .workspace-row {
  row-gap: var(--workspace-grid-gap) !important;
  column-gap: var(--workspace-grid-gap) !important;
}

/* Compatibility owns two source rows: D1, D9 and periods stay visibly bound
   to one participant without repeating a long chart name in every header. */
.account-app .workspace-row-shell.compatibility-participant-row {
  display: grid;
  gap: 10px;
  margin-block-end: var(--workspace-grid-gap) !important;
}

.account-app .compatibility-participant-row .workspace-row {
  gap: var(--workspace-grid-gap) !important;
}

.compatibility-participant-row-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.compatibility-participant-row-header > div {
  min-width: 0;
}

.compatibility-participant-row-header span {
  color: var(--vs-account-muted, #66746e);
  font-size: 12px;
  font-weight: 400;
}

.compatibility-participant-row-header h2 {
  overflow: hidden;
  margin: 2px 0 0;
  color: var(--vs-account-ink, #263b34);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compatibility-participant-row-header button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--workspace-widget-border, #d3d7d2);
  border-radius: 8px;
  background: var(--workspace-widget-surface, #fdfdfc);
  color: var(--vs-account-ink, #263b34);
  font-weight: 500;
}

.compatibility-participant-row .workspace-chart-fixed-source {
  display: none;
}

.workspace-chart-selection-required--quiet {
  justify-content: center;
  text-align: center;
}

.workspace-chart-selection-required--quiet p {
  margin-inline: auto;
}

.compatibility-report-loading {
  display: grid;
  min-height: 210px;
  place-content: center;
  gap: 9px;
  padding: 24px;
  text-align: center;
}

.compatibility-report-loading span {
  width: min(520px, 70vw);
  height: 12px;
  border-radius: 999px;
  background: #eef0ec;
}

.compatibility-report-loading span:nth-child(2) { width: min(390px, 58vw); }
.compatibility-report-loading span:nth-child(3) { width: min(460px, 64vw); }

.compatibility-report-loading p {
  margin: 8px 0 0;
  color: var(--vs-account-muted, #66746e);
  font-weight: 400;
}

.compatibility-widget-loading {
  display: grid;
  min-height: 220px;
  place-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}

.compatibility-widget-loading span {
  width: min(240px, 62vw);
  height: 12px;
  border-radius: 999px;
  background: #eef0ec;
}

.compatibility-widget-loading span:nth-child(2) { width: min(180px, 48vw); }
.compatibility-widget-loading p { margin: 4px 0 0; color: var(--vs-account-muted, #66746e); font-weight: 400; }

@media (max-width: 980px) and (min-width: 651px) {
  .account-app .compatibility-participant-row .workspace-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--workspace-grid-gap) !important;
  }

  .compatibility-participant-row .workspace-widget[data-widget-type="periods"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 650px) {
  .account-app .workspace-row-shell.compatibility-participant-row {
    gap: 8px;
    margin-block-end: var(--workspace-grid-gap) !important;
  }

  .account-app .compatibility-participant-row .workspace-row {
    gap: var(--workspace-grid-gap) !important;
  }

  .compatibility-participant-row-header {
    align-items: center;
  }

  .compatibility-participant-row-header h2 {
    font-size: 18px;
  }
}

.account-app .workspace-row > .workspace-widget,
.account-app .workspace-row > .workspace-widget > .workspace-widget-body {
  min-width: 0;
}

.account-app .workspace-page .workspace-widget {
  overflow: visible;
  border: 1px solid var(--workspace-widget-border) !important;
  border-radius: var(--workspace-widget-radius) !important;
  background: var(--workspace-widget-surface) !important;
  box-shadow: none !important;
  transition: opacity .16s ease, transform .16s ease;
}

.account-app .workspace-page:not(.is-workspace-editing) .workspace-widget:hover,
.account-app .workspace-page:not(.is-workspace-editing) .workspace-widget:focus-within,
.account-app .workspace-page:not(.is-workspace-editing) .workspace-widget.is-active,
.account-app .workspace-page:not(.is-workspace-editing) .workspace-widget-chart.is-active-chart,
.account-app .workspace-page:not(.is-workspace-editing) .workspace-widget-chart.is-active-chart .chart-panel {
  border-color: var(--workspace-widget-border) !important;
  background-color: var(--workspace-widget-surface) !important;
  box-shadow: none !important;
}

.account-app .workspace-page.is-workspace-editing .workspace-widget:hover,
.account-app .workspace-page.is-workspace-editing .workspace-widget:focus-within {
  border-color: color-mix(in srgb, var(--vs-account-accent) 48%, var(--workspace-widget-border)) !important;
}

.account-app .workspace-page .workspace-widget > .workspace-widget-header {
  padding: 0 var(--workspace-widget-padding);
  overflow: visible;
  border-bottom: 1px solid var(--workspace-widget-divider) !important;
  border-radius: var(--workspace-widget-radius) var(--workspace-widget-radius) 0 0 !important;
  background: var(--workspace-header-surface) !important;
  box-shadow: none !important;
}

.account-app .workspace-page .workspace-widget > .workspace-widget-body {
  padding: var(--workspace-widget-padding);
  border: 0;
  border-radius: 0 0 var(--workspace-widget-radius) var(--workspace-widget-radius) !important;
  background: var(--workspace-widget-surface) !important;
  box-shadow: none !important;
}

.account-app .workspace-page .workspace-widget-chart > .workspace-widget-body {
  padding: var(--workspace-widget-chart-padding);
}

.account-app .workspace-page .workspace-widget :is(.chart-viewer, .chart-panel) {
  border: 0;
  box-shadow: none !important;
}

.account-app .workspace-page .workspace-widget :is(th, td),
.account-app .workspace-page .workspace-widget :is(details, section, article) > header {
  border-color: var(--workspace-widget-divider);
}

@media (max-width: 760px) {
  .account-app {
    --workspace-grid-gap: 0px;
    --workspace-widget-padding: 10px;
    --workspace-widget-chart-padding: 0px;
  }
}

/* Shared light workspace surfaces -----------------------------------------
   These tokens are the single source for chart and widget paint. Semantic
   status fills remain on their nested elements and continue to override the
   neutral surface where applicable. */
.account-app {
  --vs-account-surface: #fdfdfc;
  --vs-account-surface-solid: #fdfdfc;
  --vs-account-line: #d3d7d2;
  --vs-account-line-strong: #d3d7d2;
  --workspace-surface: #fdfdfc;
  --workspace-widget-surface: #fdfdfc;
  --workspace-inset-surface: #fdfdfc;
  --workspace-header-surface: #fafaf8;
  --workspace-widget-border: #d3d7d2;
  --workspace-chart-grid: #bcc3bd;
  --workspace-chart-grid-strong: #a3ada6;
}

.account-app .workspace-widget,
.account-app .workspace-widget > .workspace-widget-body,
.account-app .workspace-widget .chart-viewer,
.account-app .workspace-widget .chart-panel {
  background: var(--workspace-widget-surface) !important;
}

.account-app .workspace-widget > .workspace-widget-header {
  border-bottom: 1px solid var(--workspace-widget-border) !important;
  background: var(--workspace-header-surface) !important;
}

.account-app .chart-viewer :is(.south-chart, .north-chart, .nabhasa-chart) {
  border-color: var(--workspace-chart-grid-strong);
  background: var(--workspace-widget-surface);
}

.account-app .chart-viewer :is(.south-cell, .south-cell.center) {
  border-color: var(--workspace-chart-grid);
  background: var(--workspace-widget-surface);
}

.account-app .chart-viewer .north-line {
  stroke: var(--workspace-chart-grid);
}

.account-app .chart-viewer .north-chart {
  box-shadow: inset 0 0 0 1px var(--workspace-chart-grid-strong);
}

.account-app .chart-viewer .brahmasthana {
  gap: 3px;
}

.account-app .chart-viewer .chart-code {
  color: rgba(29, 41, 39, .78);
  font-family: Inter, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.account-app .chart-viewer .chart-varga-name {
  max-width: 100%;
  overflow: hidden;
  color: rgba(29, 41, 39, .7);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-app .chart-viewer .house-number[data-beginner-label="true"] {
  display: flex;
  flex-wrap: wrap;
  gap: 1px 2px;
  max-width: calc(100% - 12px);
  color: #8d5b20;
  font-size: clamp(9px, 1.8cqw, 12px);
  line-height: 1.12;
  white-space: normal;
}

.account-app .chart-viewer .house-number[data-beginner-label="true"] .house-sign-name {
  color: rgba(29, 41, 39, .68);
  font-weight: 500;
}

.account-app .chart-viewer .north-sign-number[data-beginner-label="true"] {
  z-index: 8;
  box-sizing: border-box;
  width: min(16%, 84px);
  padding: 1px 2px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--workspace-widget-surface) 88%, transparent);
  color: rgba(29, 41, 39, .7);
  font-size: clamp(9px, 2cqw, 12px);
  font-weight: 500;
  line-height: 1.08;
  text-align: center;
  white-space: normal;
  pointer-events: none;
}

.calculation-switch {
  position: relative;
  width: 46px;
  min-width: 46px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--workspace-widget-border, #d3d7d2);
  border-radius: 999px;
  background: #ecefeb;
  box-shadow: none;
  cursor: pointer;
}

.calculation-switch > span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 32, 30, .2);
  transition: transform .16s ease;
}

.calculation-switch[aria-checked="true"] {
  border-color: var(--vs-account-accent, #176f65);
  background: var(--vs-account-accent, #176f65);
}

.calculation-switch[aria-checked="true"] > span {
  transform: translateX(18px);
}

.calculation-switch:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vs-account-accent, #176f65) 54%, transparent);
  outline-offset: 2px;
}

@media (max-width: 390px) {
  .account-app .chart-viewer .house-number[data-beginner-label="true"] .house-sign-name {
    flex-basis: 100%;
  }
}

/* Neecha-bhanga is explained as a verified cancellation trace. Source/profile
   metadata stays available without competing with the user-facing reasons. */
.yoga-inspector--neecha .yoga-inspector-scroll {
  padding: 12px;
}

.yoga-neecha-summary,
.yoga-neecha-caution {
  margin: 0;
  overflow-wrap: anywhere;
}

.yoga-neecha-summary {
  font-size: 14px;
  line-height: 1.5;
}

.yoga-neecha-caution {
  margin-top: 8px;
  padding: 9px 10px;
  border-left: 3px solid var(--vs-account-gold, #a48142);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--vs-account-gold, #a48142) 7%, transparent);
  color: var(--vs-account-muted, #66706d);
  font-size: 12.5px;
  line-height: 1.45;
}

.yoga-neecha-reasons ul {
  display: grid;
  gap: 6px;
}

.yoga-neecha-reasons li {
  position: relative;
  padding: 8px 9px 8px 30px;
  border: 1px solid color-mix(in srgb, var(--vs-account-line, #d9ddd8) 78%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--workspace-inset-surface, #f4f5f1) 72%, transparent);
  overflow-wrap: anywhere;
}

.yoga-neecha-reasons li::before {
  position: absolute;
  top: 8px;
  left: 10px;
  color: var(--vs-account-green, #17695f);
  content: "✓";
  font-weight: 750;
}

.yoga-inspector--neecha .yoga-inspector-participants li {
  grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
}

.yoga-inspector--neecha .yoga-inspector-participants span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.yoga-technical-details {
  margin-top: 12px;
  border-top: 1px solid var(--vs-account-line, #d9ddd8);
}

.yoga-technical-details > summary {
  padding: 10px 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}

.yoga-technical-details > div {
  padding-bottom: 8px;
}

.yoga-technical-meta > div {
  display: grid;
  grid-template-columns: minmax(116px, .8fr) minmax(0, 1.2fr);
  gap: 8px;
  padding: 4px 0;
}

.yoga-technical-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.yoga-technical-source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 430px) {
  .yoga-inspector--neecha .yoga-inspector-header h2,
  .yoga-inspector--neecha .yoga-inspector-header span {
    white-space: normal;
  }

  .yoga-inspector--neecha .yoga-inspector-participants li,
  .yoga-technical-meta > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .yoga-neecha-reasons li {
    padding-right: 8px;
  }
}

@media (max-width: 900px) {
  .workspace-row:has(> .workspace-widget-chart .workspace-chart-footer:not(:empty)) > .workspace-widget-chart {
    height: calc(min(
      var(--workspace-unit-height, 430px),
      calc(100cqw + var(--workspace-widget-header-height))
    ) + var(--workspace-chart-footer-height)) !important;
  }
}

@media (max-width: 760px) {
  .workspace-widget-chart[data-widget-type="transit-chart"] .workspace-chart-source-control {
    min-width: 74px;
  }

  .workspace-widget-chart[data-widget-type="transit-chart"] .workspace-chart-transit-varga-control {
    min-width: 70px;
  }

  .workspace-widget-chart[data-widget-type="transit-chart"] .workspace-chart-transit-context {
    min-width: 102px;
  }

  .workspace-widget-chart[data-widget-type="transit-chart"]:has(.chart-viewer[data-chart-style="south"]) .workspace-chart-transit-context {
    width: 88px;
    min-width: 0;
  }

  .workspace-transit-time-panel {
    gap: 4px;
    padding-inline: 4px;
  }

  .workspace-transit-time-steps { gap: 1px; }
  .workspace-transit-time-panel button { font-size: 10.5px; padding-inline: 2px; }
  .workspace-transit-time-actions button { width: 40px; font-size: 20px; }

  .workspace-widget-chart {
    --workspace-chart-footer-height: 56px;
  }

  .workspace-chart-footer .varshaphala-chart-contextbar {
    gap: 4px;
    padding: 6px;
  }

  .workspace-chart-footer .varshaphala-chart-contextbar > span {
    flex: 1 1 auto;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-chart-footer .varshaphala-chart-contextbar button {
    min-width: 0;
    padding-inline: 6px;
  }

  .workspace-chart-footer .varshaphala-chart-selection {
    display: none;
  }

  .workspace-chart-selection-required {
    width: min(100% - 24px, 360px);
    padding: 22px 18px;
  }
}

/* My Cards final cascade guard (must remain at EOF). */
@media (max-width: 820px),
       (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .cards-page--mobile .cards-library-filters {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
  }

  .cards-page--mobile :is(.cards-library-filter, .cards-library-folder-chip, .cards-library-add-folder) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .cards-page--mobile :is(.cards-library-filter, .cards-library-add-folder) {
    min-height: 44px;
  }

  .cards-page--mobile .cards-library-folder-chip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  .cards-page--mobile .cards-library-folder-menu {
    display: none !important;
  }

  .cards-page--mobile .cards-library-folder-select {
    width: 100%;
    min-width: 0;
  }

  .cards-page--mobile .cards-library-folder-select > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cards-page--mobile .cards-row-astro {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
  }
}

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  body[data-account-route="charts"] .cards-page--desktop {
    display: none !important;
  }

  body[data-account-route="charts"] .cards-page--mobile {
    display: block !important;
    padding-bottom: calc(var(--mobile-m1-nav-height, 66px) + 12px + env(safe-area-inset-bottom));
  }

  body[data-account-route="charts"] .account-mobile-nav {
    display: grid !important;
  }
}


/* Varshaphala Tajika motion semantics v2: state, never good/bad. */
.varshaphala-yoga-list article[data-tajaka-motion-state] {
  --tajaka-motion-accent: #7b8581;
  border-left: 2px solid var(--tajaka-motion-accent);
}

.varshaphala-yoga-list article[data-tajaka-motion-state="applying"] {
  --tajaka-motion-accent: var(--vs-account-teal, #176f61);
}

.varshaphala-yoga-list article[data-tajaka-motion-state="separating"] {
  --tajaka-motion-accent: #a06d27;
}

.varshaphala-yoga-list article[data-tajaka-motion-state="exact"] {
  --tajaka-motion-accent: var(--vs-account-gold, #b07b24);
  border-left-width: 3px;
}

.varshaphala-yoga-list article[data-tajaka-motion-state="collection"] {
  --tajaka-motion-accent: #6f7f79;
}

.varshaphala-yoga-list details {
  display: block;
}

.varshaphala-yoga-list summary {
  display: grid;
  cursor: pointer;
  list-style: none;
}

.varshaphala-yoga-list summary::-webkit-details-marker {
  display: none;
}

.tajaka-yoga-detail {
  padding: 8px 10px 10px 12px;
  border-top: 1px solid color-mix(in srgb, var(--tajaka-motion-accent, #7b8581) 18%, transparent);
  color: var(--vs-account-text, #25302c);
  font-size: 11px;
  line-height: 1.35;
}

.tajaka-yoga-detail dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  margin: 0;
}

.tajaka-yoga-detail dl > div {
  min-width: 0;
}

.tajaka-yoga-detail dt {
  color: var(--vs-account-muted, #78837e);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tajaka-yoga-detail dd {
  margin: 1px 0 0;
  overflow-wrap: anywhere;
}

.tajaka-yoga-traces,
.tajaka-yoga-evidence {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 18px;
}

.tajaka-yoga-traces li {
  display: grid;
  gap: 1px;
}

.tajaka-yoga-traces span,
.tajaka-yoga-evidence {
  color: var(--vs-account-muted, #66736d);
}

.tajaka-motion-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--tajaka-motion-color, #707b77) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tajaka-motion-color, #707b77) 9%, var(--workspace-widget-surface, #fffdfa));
  color: var(--tajaka-motion-color, #66716d);
  font-size: 10px;
  font-weight: 780;
  line-height: 1.15;
  white-space: nowrap;
}

.tajaka-motion-badge.is-applying {
  --tajaka-motion-color: var(--vs-account-teal, #176f61);
}

.tajaka-motion-badge.is-separating {
  --tajaka-motion-color: #9a6824;
}

.tajaka-motion-badge.is-exact {
  --tajaka-motion-color: #8b6721;
  border-color: color-mix(in srgb, var(--vs-account-gold, #b07b24) 58%, transparent);
  background: color-mix(in srgb, var(--vs-account-gold, #b07b24) 15%, var(--workspace-widget-surface, #fffdfa));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-account-teal, #176f61) 12%, transparent);
}

.tajaka-motion-badge:is(.is-stationary, .is-translation, .is-collection, .is-neutral) {
  --tajaka-motion-color: #707b77;
}

.tajaka-exactness,
.tajaka-candidate-label {
  color: var(--vs-account-muted, #78837e);
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.varshaphala-list-main small:has(.tajaka-motion-badge) {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
}

@media (max-width: 760px) {
  .varshaphala-yoga-list .varshaphala-list-main {
    min-height: 44px;
  }

  .varshaphala-yoga-list .tajaka-motion-badge {
    min-height: 20px;
    padding-inline: 6px;
    font-size: 9px;
  }

  .tajaka-yoga-detail dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Today compact summary: one semantic component at every viewport. */
.today-dashboard-header.today-daily-hero {
  grid-template-columns: minmax(0, 1fr) 150px;
  min-height: 0;
  padding: 24px 28px;
  gap: 20px;
  background: linear-gradient(118deg, #fafbf5, #deebe1);
  color: #244e40;
}
.today-daily-hero .today-dashboard-title { min-width: 0; gap: 0; text-align: left; }
.today-daily-hero .today-dashboard-title h1 {
  font-size: 2.0625rem; line-height: 1.18; letter-spacing: -.025em;
  margin: 0 0 5px; white-space: normal; overflow-wrap: anywhere;
  max-width: none; color: #244e40;
}
.today-hero-weekday { margin: 0; font-size: 1.25rem; line-height: 1.35; }
.account-app .today-daily-hero .today-hero-city {
  display: inline-flex; justify-self: start; align-items: center; gap: 6px;
  min-height: 44px; max-width: 100%; padding: 4px 0;
  border: 0; background: transparent; color: #365e50;
  font: inherit; font-size: .875rem; line-height: 1.4; text-align: left; cursor: pointer;
}
.today-hero-city span { overflow-wrap: anywhere; }
.today-hero-city svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.today-hero-city:focus-visible, .today-location-dialog :focus-visible { outline: 2px solid #315e4e; outline-offset: 3px; }
.today-daily-hero .today-hero-facts {
  display: grid; gap: 7px; margin: 4px 0 0; padding-top: 10px;
  border-top: 1px solid #315e4e26; color: #244e40;
  font-size: 1.25rem; font-weight: 500; line-height: 1.35;
}
.today-hero-facts p { margin: 0; }
.today-daily-hero .today-daily-visual { width: 150px; height: auto; min-height: 0; display: grid; justify-items: center; gap: 10px; }
.today-daily-hero .today-daily-visual svg { width: 88px; height: 88px; }
.today-daily-hero .today-phase-badge { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.today-daily-hero .today-phase-badge strong, .today-daily-hero .today-phase-badge small { font-size: .875rem; line-height: 1.4; }
.today-daily-hero .today-phase-badge > span { display: none; }
.today-location-dialog { box-sizing: border-box; width: min(400px, calc(100% - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 22px; border: 1px solid #315e4e26; border-radius: 20px; background: #f8faf5; color: #244e40; box-shadow: 0 20px 60px #163b3426; font-family: inherit; overflow: auto; }
.today-location-dialog::backdrop { background: #163b3440; }
.today-location-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.today-location-dialog h2 { font-size: 1.4rem; margin: 0; }
.today-location-dialog p { font-size: .875rem; line-height: 1.5; }
.today-location-dialog label { display: block; margin-bottom: 6px; }
.today-location-dialog input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px; border: 1px solid #315e4e60; border-radius: 9px; background: white; color: inherit; font: inherit; }
.today-location-dialog button { min-height: 44px; padding: 9px 12px; border: 1px solid #315e4e35; border-radius: 9px; background: #edf3e9; color: inherit; font: inherit; cursor: pointer; }
.today-location-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.today-location-dialog .local-location-results { position: static; max-height: none; border: 0; box-shadow: none; background: transparent; }
.today-location-dialog .local-location-results button { display: grid; width: 100%; text-align: left; margin: 6px 0; }
@media (max-width: 600px) {
  .today-dashboard-header.today-daily-hero { grid-template-columns: minmax(0, 1fr); padding: 18px 14px; gap: 14px; }
  .today-daily-hero .today-dashboard-title h1 { font-size: 1.5625rem; line-height: 1.2; }
  .today-daily-hero .today-hero-facts { font-size: 1.1875rem; }
  .today-daily-hero .today-daily-visual { display: flex; justify-self: start; width: 100%; height: auto; gap: 10px; }
  .today-daily-hero .today-daily-visual svg { flex: 0 0 40px; width: 40px; height: 40px; }
  .today-daily-hero .today-phase-badge { justify-content: flex-start; }
  .today-location-dialog { margin: auto 0 0; width: 100%; max-height: 90dvh; border-radius: 20px 20px 0 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

.today-dashboard-header.today-daily-hero::before, .today-dashboard-header.today-daily-hero::after { display: none; }
.today-daily-hero .today-phase-badge { min-width: 0; overflow-wrap: anywhere; }
.today-daily-hero .today-hero-facts { overflow-wrap: anywhere; }
.today-hero-city span { min-width: 0; }
@media (max-width: 600px) {
  .today-daily-hero .today-phase-badge { flex: 1; }
}
.today-daily-hero .today-phase-badge small { white-space: normal; max-width: 100%; }

/* Today main screen: shared snapshot, quiet hierarchy, accessible text reflow. */
.today-dashboard-header.today-daily-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  grid-template-areas: "top top" "title moon" "facts moon";
  align-items: start;
  gap: 0 36px;
  padding: 24px 32px 30px;
  border: 1px solid var(--workspace-widget-border);
  border-radius: var(--workspace-widget-radius);
  background: var(--workspace-widget-surface);
  box-shadow: 0 6px 24px #1f473608;
  color: var(--vs-account-ink);
  font-family: inherit;
  overflow: visible;
}
.today-hero-topline { grid-area: top; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 12px; margin-bottom: 12px; }
.today-hero-eyebrow { color: var(--vs-account-muted); font-size: .6875rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.account-app .today-daily-hero .today-hero-moment {
  min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--vs-account-muted);
  font: inherit; font-size: .75rem; cursor: pointer; text-align: left;
}
.today-daily-hero .today-dashboard-title { grid-area: title; display: grid; gap: 0; }
.today-daily-hero .today-dashboard-title h1 {
  margin: 0 0 6px; font-family: inherit; font-size: 2.125rem; font-weight: 600;
  line-height: 1.2; letter-spacing: -.025em; color: var(--vs-account-ink);
  text-wrap: initial; overflow-wrap: normal; word-break: normal;
}
.today-daily-hero .today-hero-weekday { font-size: 1.25rem; font-weight: 450; line-height: 1.4; color: var(--vs-account-muted); }
.account-app .today-daily-hero .today-hero-city { gap: 6px; margin-top: 2px; color: var(--vs-account-muted); font-weight: 450; }
.account-app .today-daily-hero .today-hero-city:hover { color: var(--vs-account-accent); text-decoration: underline; text-underline-offset: 4px; }
.today-daily-hero .today-hero-facts {
  grid-area: facts; display: grid; gap: 9px; margin: 10px 0 0; padding: 18px 0 0 1em;
  list-style: disc outside; min-width: 0;
  border-top: 1px solid var(--workspace-line); font-size: 1.25rem; font-weight: 520; line-height: 1.4; letter-spacing: -.01em;
}
.today-daily-hero .today-hero-facts li { display: list-item; margin: 0; padding: 0; overflow-wrap: anywhere; }
.today-daily-hero .today-hero-facts li::marker { color: var(--vs-account-muted); font-size: .7em; }
.today-daily-hero .today-daily-visual {
  grid-area: moon; align-self: center; display: grid; align-items: center; justify-items: center;
  gap: 12px; width: 210px; min-width: 0; height: auto; margin: 0;
}
.today-daily-hero .today-daily-visual .today-moon-disc { width: 170px; height: 170px; flex: none; filter: drop-shadow(0 8px 9px #24463718); }
.today-daily-hero .today-phase-badge { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 0 5px; min-height: 0; font-variant-numeric: tabular-nums; backdrop-filter: none; }
.today-daily-hero .today-phase-badge strong { color: var(--vs-account-ink); font-size: .875rem; font-weight: 650; }
.today-daily-hero .today-phase-badge small { color: var(--vs-account-muted); font-size: .875rem; font-weight: 450; }
.today-daily-hero .today-phase-badge > span { display: inline; width: auto; height: auto; background: transparent; }
.today-hero-pending { grid-column: 1 / -1; padding: 22px 0 10px; min-height: 112px; border-top: 1px solid var(--workspace-line); color: var(--vs-account-muted); }
.today-hero-pending strong { display: block; font-size: 1rem; font-weight: 550; }
.today-hero-pending p { margin: 8px 0; font-size: .875rem; }
.today-hero-skeleton { display: block; width: min(72%, 270px); height: 8px; border-radius: 4px; margin-bottom: 20px; background: var(--workspace-inset-surface); }
.account-app .today-hero-pending button { min-height: 44px; border: 1px solid var(--workspace-widget-border); border-radius: 8px; padding: 8px 14px; background: var(--workspace-widget-surface); color: var(--vs-account-ink); font: inherit; cursor: pointer; }
.today-daily-hero button:focus-visible { outline: 2px solid var(--vs-account-accent); outline-offset: 4px; }
.today-dashboard[data-today-state="loading"] .today-transit-slot,
.today-dashboard[data-today-state="error"] .today-transit-slot { visibility: hidden; }
.today-dashboard .today-transit { box-shadow: none; }
@media (max-width: 760px) {
  .today-dashboard-header.today-daily-hero { grid-template-columns: minmax(0, 1fr) 84px; grid-template-areas: "top top" "title title" "facts moon"; padding: 14px 20px 22px; gap: 0 14px; border-radius: var(--workspace-widget-radius); }
  .today-hero-topline { margin-bottom: 8px; }
  .today-daily-hero .today-dashboard-title h1 { font-size: 1.625rem; letter-spacing: -.035em; }
  .today-daily-hero .today-hero-facts { padding-top: 16px; margin-top: 6px; gap: 9px; font-size: 1.1875rem; }
  .today-daily-hero .today-daily-visual { display: grid; grid-template-columns: minmax(0, 1fr); justify-self: end; align-self: center; width: 84px; gap: 6px; margin-top: 16px; }
  .today-daily-hero .today-daily-visual .today-moon-disc { width: 84px; height: 84px; margin-left: 0; }
  .today-daily-hero .today-phase-badge { justify-content: center; gap: 2px 4px; text-align: center; }
  .today-daily-hero .today-phase-badge strong, .today-daily-hero .today-phase-badge small { font-size: .75rem; }
  .today-daily-hero .today-phase-badge > span { display: none; }
  .today-daily-hero .today-phase-badge small { flex-basis: 100%; overflow-wrap: anywhere; }
}
@media (max-width: 374px) {
  .today-dashboard-header.today-daily-hero { padding-left: 14px; padding-right: 14px; grid-template-columns: minmax(0, 1fr) 64px; column-gap: 10px; }
  .today-daily-hero .today-dashboard-title h1 { font-size: 1.5625rem; }
  .today-daily-hero .today-daily-visual { width: 64px; }
  .today-daily-hero .today-phase-badge { width: 80px; max-width: none; }
  .today-daily-hero .today-daily-visual .today-moon-disc { width: 64px; height: 64px; }
}

/* Landscape keeps the entire day card within the short viewport. */
@media (min-width: 761px) and (max-height: 500px) {
  .today-dashboard-header.today-daily-hero { padding: 10px 24px 16px; grid-template-columns: minmax(0, 1fr) 170px; gap: 0 22px; }
  .today-hero-topline { margin-bottom: 0; }
  .today-daily-hero .today-dashboard-title h1 { font-size: 1.75rem; }
  .today-daily-hero .today-daily-visual { width: 170px; }
  .today-daily-hero .today-daily-visual .today-moon-disc { width: 128px; height: 128px; }
  .today-daily-hero .today-hero-facts { margin-top: 2px; padding-top: 10px; gap: 5px; font-size: 1.125rem; }
}

.today-dashboard { font-family: inherit; }
.today-dashboard h2, .today-dashboard h3 { font-family: inherit; letter-spacing: -.025em; }
.today-dashboard .today-panchanga-column > header h2 { font-size: 1.375rem; font-weight: 600; }

/* Keep the daily summary visually separate from the chart/editorial row. */
.today-dashboard > .vs-today-summary { margin-bottom: 0; }
.today-dashboard > .vs-today-summary + .today-dashboard-primary { margin-top: 16px; }
@media (max-width: 760px) {
  .today-dashboard > .vs-today-summary + .today-dashboard-primary { margin-top: 12px; }
}

/* Today location: non-modal combobox, compact options, normal page focus flow. */
.today-location-editor {
  display: flex; flex-direction: column; position: fixed; z-index: 1400; box-sizing: border-box; max-width: calc(100vw - 24px);
  color: var(--vs-account-ink); font-family: inherit;
}
.today-location-editor input {
  box-sizing: border-box; display: block; width: 100%; min-height: 44px; height: auto; flex: 0 0 auto; padding: 10px 12px;
  border: 1px solid var(--workspace-widget-border); border-radius: 9px; background: var(--workspace-widget-surface); color: var(--vs-account-ink);
  font: inherit; font-size: 1rem; line-height: 1.4; outline: 2px solid var(--vs-account-accent); outline-offset: 2px;
}
.today-location-dropdown {
  min-height: 0; flex: 0 1 auto; margin-top: 6px; padding: 4px; border: 1px solid var(--workspace-widget-border); border-radius: 9px;
  background: var(--workspace-widget-surface); box-shadow: 0 8px 24px #1c3e321c;
  max-height: var(--today-location-list-height, 264px); overflow-y: auto; overscroll-behavior: contain;
}
.today-location-dropdown [role="option"] {
  display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 10px 9px;
  border: 0; border-radius: 5px; background: transparent; color: var(--vs-account-ink); text-align: left;
  font: inherit; font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; cursor: pointer;
}
.today-location-dropdown [role="option"]:hover,
.today-location-dropdown [role="option"][aria-selected="true"] { background: var(--workspace-inset-surface); }
.today-location-dropdown [role="status"] { margin: 0; padding: 12px 9px; font-size: .875rem; line-height: 1.45; }
.today-location-editor [hidden] { display: none; }

/* Varshaphala: compact annual context follows the chart selected in Calculation. */
.varshaphala-compact-hero {
  grid-template-columns: minmax(220px, 1fr) auto;
  grid-template-areas:
    "content navigation"
    "overview overview";
  gap: 14px 24px;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.varshaphala-compact-hero > .workspace-sheet-hero__content {
  grid-area: content;
  align-self: center;
}

.varshaphala-compact-hero > .workspace-unified-tabbar {
  grid-area: navigation;
}

.varshaphala-compact-hero > .workspace-unified-tabbar .workspace-section-tab.is-active {
  color: #24372f;
}

.varshaphala-compact-hero > .workspace-unified-tabbar .workspace-section-tab.is-active::after {
  height: 1px;
  background: #c8a363;
}

.varshaphala-overview-panel {
  grid-area: overview;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(244px, 280px) 1px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  min-width: 0;
  min-height: 150px;
  padding: 22px 150px 22px 24px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(115deg, #0d5139 0%, #135e43 100%);
  color: #f7f5ec;
}

.varshaphala-compact-controls {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 13px;
  min-width: 0;
}

.varshaphala-compact-control {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.varshaphala-compact-label {
  grid-column: 1;
  color: #d2ae6d;
  font: 500 var(--vs-type-panel-label-size, 17px)/1.25 var(--vs-account-font-sans, Inter, system-ui, sans-serif);
  letter-spacing: 0;
}

.varshaphala-compact-control select {
  grid-column: 2 / 4;
  grid-row: 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 26px !important;
  height: 26px;
  margin: 0;
  padding: 0 28px 0 0;
  appearance: none;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #fbfaf4;
  font: 600 var(--vs-type-panel-value-size, 20px)/1.25 var(--vs-account-font-sans, Inter, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.varshaphala-compact-action {
  grid-column: 3;
  grid-row: 1;
  z-index: 1;
  justify-self: end;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #d8c8a7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  pointer-events: none;
}

.varshaphala-compact-control:hover select,
.varshaphala-compact-control:focus-within select,
.varshaphala-compact-location:hover,
.varshaphala-compact-location:focus-visible {
  background: rgba(255, 255, 255, .06);
}

.varshaphala-compact-control select:focus-visible,
.varshaphala-compact-location:focus-visible {
  outline: 2px solid rgba(210, 174, 109, .75);
  outline-offset: 3px;
}

.varshaphala-compact-controls select:disabled,
.varshaphala-compact-location:disabled {
  cursor: default;
  opacity: .52;
}

.varshaphala-compact-location {
  color: inherit;
  cursor: pointer;
}

.varshaphala-compact-location strong {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  color: #fbfaf4;
  font: 600 var(--vs-type-panel-value-size, 20px)/1.25 var(--vs-account-font-sans, Inter, system-ui, sans-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.varshaphala-compact-location .varshaphala-compact-action {
  width: 15px;
  height: 15px;
}

.varshaphala-overview-divider {
  position: relative;
  z-index: 2;
  width: 1px;
  height: 88px;
  background: rgba(231, 222, 198, .3);
}

.varshaphala-overview-facts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 16px 28px;
  min-width: 0;
}

.varshaphala-overview-fact {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.varshaphala-overview-fact > span {
  color: #c7cfc9;
  font: 500 var(--vs-type-panel-label-size, 17px)/1.25 var(--vs-account-font-sans, Inter, system-ui, sans-serif);
  letter-spacing: 0;
}

.varshaphala-overview-fact > strong {
  min-width: 0;
  color: #fbfaf4;
  font: 600 var(--vs-type-panel-value-size, 20px)/1.25 var(--vs-account-font-sans, Inter, system-ui, sans-serif);
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.varshaphala-overview-fact.is-astrological > strong {
  white-space: nowrap;
}

.varshaphala-overview-fact.is-numeric > strong {
  font-variant-numeric: tabular-nums;
}

.varshaphala-overview-state {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  margin: 0;
  color: #dce4df;
  font: 400 13px/1.45 Inter, system-ui, sans-serif;
}

.varshaphala-wizard[data-mode="location"] .varshaphala-wizard-steps > li:not(:last-child) {
  display: none;
}

.varshaphala-wizard[data-mode="location"] .varshaphala-wizard-steps > li:last-child label > span b {
  display: none;
}

@media (max-width: 1120px) {
  .varshaphala-compact-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "content"
      "navigation"
      "overview";
    gap: 10px;
  }

  .varshaphala-overview-panel {
    grid-template-columns: minmax(220px, 260px) 1px minmax(0, 1fr);
    gap: 22px;
    padding-right: 116px;
  }

  .varshaphala-overview-facts {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }
}

@media (max-width: 620px) {
  .varshaphala-compact-hero {
    max-width: 100%;
    padding: 0;
    overflow: hidden;
  }

  .varshaphala-overview-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    padding: 20px 20px 24px;
    border-radius: 10px;
  }

  .varshaphala-compact-controls {
    width: 100%;
    gap: 12px;
  }

  .varshaphala-compact-control {
    grid-template-columns: 72px minmax(0, 1fr) 18px;
    min-height: 28px;
  }

  .varshaphala-overview-divider {
    width: 100%;
    height: 1px;
  }

  .varshaphala-overview-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 16px;
  }

  .varshaphala-overview-fact {
    gap: 5px;
  }

}

@media (min-width: 1420px) {
  .varshaphala-overview-facts {
    grid-template-columns: 190px 250px 280px minmax(110px, 1fr);
    gap: 16px 18px;
  }
}

@media (min-width: 1121px) and (max-width: 1419px) {
  .varshaphala-overview-panel {
    grid-template-columns: minmax(220px, 260px) 1px minmax(0, 1fr);
    gap: 22px;
    padding-right: 116px;
  }

  .varshaphala-overview-facts {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 430px) {
  .varshaphala-overview-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Shared analytical sheet heading ---------------------------------------
   Calculation and Varshaphala use the same title/navigation geometry and
   the same South Indian chart watermark component. Section color is owned
   by one variable so only the active tab changes color. */
.workspace-sheet-hero {
  --workspace-tab-active: #314d5d;
  --workspace-tab-gold: #c7a45b;
}

.workspace-sheet-hero[data-sheet-theme="transits"] {
  --workspace-tab-active: #444a6e;
}

.workspace-sheet-hero[data-sheet-theme="varshaphala"] {
  --workspace-tab-active: #0f5a3c;
}

.workspace-sheet-hero[data-sheet-theme="compatibility"] {
  --workspace-tab-active: #683d4b;
}

.workspace-sheet-hero[data-sheet-theme="blank"] {
  --workspace-tab-active: #8b673d;
}

.workspace-sheet-hero[data-analytics-sheet-header] {
  grid-template-columns: minmax(220px, 1fr) auto;
  grid-template-areas:
    "content navigation"
    "overview overview";
  gap: 14px 24px;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.workspace-sheet-hero[data-analytics-sheet-header] > .workspace-sheet-hero__content {
  grid-area: content;
  align-self: center;
  padding-left: 20px;
}

.workspace-sheet-hero[data-analytics-sheet-header] .workspace-sheet-hero__title {
  color: #26332f;
  font-family: var(--vs-account-font-sans, Inter, system-ui, sans-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.workspace-sheet-hero[data-analytics-sheet-header] > .workspace-unified-tabbar {
  grid-area: navigation;
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab:hover {
  color: color-mix(in srgb, var(--workspace-tab-active) 82%, #26332f);
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab > [role="tab"] {
  font-family: var(--vs-account-font-sans, Inter, system-ui, sans-serif);
  font-size: var(--vs-type-navigation-size, 16px);
  font-weight: 500;
  line-height: 1.2;
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab.is-active > [role="tab"] {
  font-weight: 600;
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab.is-active,
.varshaphala-compact-hero > .workspace-unified-tabbar .workspace-section-tab.is-active {
  color: var(--workspace-tab-active);
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab.is-active::after,
.varshaphala-compact-hero > .workspace-unified-tabbar .workspace-section-tab.is-active::after {
  bottom: 1px;
  height: 1px;
  background: var(--workspace-tab-active);
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab.is-new-sheet {
  margin-left: 1px;
  padding-left: 20px;
  border-left: 1px solid color-mix(in srgb, var(--workspace-tab-gold) 58%, transparent) !important;
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-edit-mode-toggle,
.workspace-sheet-hero > .workspace-unified-tabbar [data-workspace-edit-toggle] {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 5px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #66716c;
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-edit-mode-toggle:hover,
.workspace-sheet-hero > .workspace-unified-tabbar .workspace-edit-mode-toggle:focus-visible {
  color: var(--workspace-tab-active);
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-edit-mode-lock,
.workspace-sheet-hero > .workspace-unified-tabbar .workspace-edit-mode-lock svg {
  width: 18px;
  height: 18px;
}

.workspace-sheet-hero > .workspace-unified-tabbar .workspace-edit-mode-switch-track {
  display: none;
}

.natal-overview-panel {
  grid-area: overview;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(260px, 310px) 1px minmax(230px, 1fr);
  align-items: center;
  gap: 30px;
  min-width: 0;
  min-height: 150px;
  padding: 22px 300px 22px 24px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(115deg, #2f4b58 0%, #355462 100%);
  color: #f8faf7;
}

.workspace-sheet-hero[data-sheet-theme="transits"] .natal-overview-panel {
  background: linear-gradient(115deg, #444a6e 0%, #4d5476 100%);
}

.transit-overview-panel {
  grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
}

.workspace-sheet-hero[data-sheet-theme="compatibility"] .natal-overview-panel {
  background: linear-gradient(115deg, #683d4b 0%, #774958 100%);
}

.workspace-sheet-hero[data-sheet-theme="blank"] .natal-overview-panel {
  background: linear-gradient(115deg, #705b40 0%, #786348 100%);
}

.custom-sheet-overview-panel {
  grid-template-columns: minmax(300px, 470px) minmax(0, 1fr);
}

.custom-sheet-overview-source {
  gap: 18px;
}

.custom-sheet-overview-row {
  grid-template-columns: 90px minmax(0, 1fr) 20px;
}

.custom-sheet-overview-row > strong {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-sheet-overview-select {
  grid-column: 2 / 4;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #fbfcf9;
  font: 600 var(--vs-type-panel-value-size, 20px)/1.25 var(--vs-account-font-sans, Inter, system-ui, sans-serif);
  text-align: left;
  cursor: pointer;
}

.custom-sheet-overview-select > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-sheet-overview-select > svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #ded2b8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.custom-sheet-overview-select:hover,
.custom-sheet-overview-select:focus-visible {
  background: rgba(255, 255, 255, .08);
}

.custom-sheet-overview-select:focus-visible {
  outline: 2px solid rgba(222, 210, 184, .75);
  outline-offset: 3px;
}

.custom-sheet-overview-panel .workspace-south-chart-watermark {
  opacity: .06;
}

.compatibility-overview-panel {
  grid-template-columns: minmax(210px, 300px) 1px minmax(210px, 300px) minmax(0, 1fr);
  gap: 24px;
}

.compatibility-overview-person {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
}

.compatibility-overview-select {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #fbfcf9;
  font: 500 var(--vs-type-panel-value-size, 20px)/1.25 var(--vs-account-font-sans, Inter, system-ui, sans-serif);
  text-align: left;
  cursor: pointer;
}

.compatibility-overview-select > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compatibility-overview-select > svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #ded2b8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.compatibility-overview-select:hover,
.compatibility-overview-select:focus-visible {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.compatibility-overview-select:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .72);
  outline-offset: 3px;
}

.compatibility-overview-position {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.compatibility-overview-position > span {
  color: #d4b674;
  font: 500 var(--vs-type-panel-label-size, 17px)/1.25 var(--vs-account-font-sans, Inter, system-ui, sans-serif);
}

.compatibility-overview-position > strong {
  min-width: 0;
  color: #fbfcf9;
  font: 600 clamp(30px, 2.4vw, 38px)/1 var(--vs-account-font-display, "Cormorant Garamond", Georgia, serif);
  letter-spacing: -.015em;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}

.compatibility-overview-divider {
  position: relative;
  z-index: 2;
  width: 1px;
  height: 104px;
  align-self: center;
  background: rgba(228, 235, 231, .28);
}

.workspace-sheet-hero[data-sheet-theme="bhrigu"] .natal-overview-panel,
.workspace-sheet-hero[data-sheet-theme="prashna"] .natal-overview-panel,
.workspace-sheet-hero[data-sheet-theme="muhurta"] .natal-overview-panel,
.workspace-sheet-hero[data-sheet-theme="rectification"] .natal-overview-panel {
  background: linear-gradient(115deg, #40524c 0%, #51645d 100%);
}

.natal-overview-source {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 13px;
  min-width: 0;
}

.natal-overview-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  min-height: 26px;
}

.natal-overview-row > span,
.natal-overview-facts span {
  color: #d4b674;
  font: 500 var(--vs-type-panel-label-size, 17px)/1.25 var(--vs-account-font-sans, Inter, system-ui, sans-serif);
  letter-spacing: 0;
}

.natal-overview-row > strong {
  min-width: 0;
  color: #fbfcf9;
  font: 500 var(--vs-type-panel-value-size, 20px)/1.25 var(--vs-account-font-sans, Inter, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.natal-overview-facts strong {
  min-width: 0;
  color: #fbfcf9;
  font: 600 var(--vs-type-astrological-value-size, clamp(34px, 3vw, 48px))/1 var(--vs-account-font-display, "Cormorant Garamond", Georgia, serif);
  letter-spacing: -.015em;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}

.natal-overview-edit {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #ded2b8;
}

.natal-overview-edit:hover,
.natal-overview-edit:focus-visible {
  background: rgba(255, 255, 255, .08);
  color: #fff9eb;
}

.natal-overview-edit svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.natal-overview-divider {
  position: relative;
  z-index: 2;
  width: 1px;
  height: 88px;
  background: rgba(228, 235, 231, .28);
}

.natal-overview-facts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: clamp(44px, 5vw, 80px);
  row-gap: 20px;
  justify-content: start;
  min-width: 0;
  margin-left: 24px;
}

.natal-overview-facts > div {
  display: grid;
  gap: 8px;
}

.workspace-south-chart-watermark {
  position: absolute;
  z-index: 1;
  right: -16px;
  bottom: -84px;
  width: 250px;
  height: 250px;
  overflow: visible;
  fill: none;
  stroke: #f4f0e4;
  stroke-width: 1.15;
  opacity: .085;
  transform: rotate(-8deg);
  transform-origin: center;
  pointer-events: none;
  user-select: none;
}

.workspace-south-chart-watermark text {
  fill: #d6ba79;
  stroke: none;
  font: 600 78px/1 var(--vs-account-font-display, "Cormorant Garamond", Georgia, serif);
}

.transit-overview-panel .workspace-south-chart-watermark {
  opacity: .06;
}

.compatibility-overview-panel .workspace-south-chart-watermark {
  opacity: .06;
}

.natal-overview-state {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  margin: 0;
  color: #e0e7e3;
  font: 400 13px/1.45 Inter, system-ui, sans-serif;
}

@media (max-width: 1120px) {
  .workspace-sheet-hero[data-analytics-sheet-header] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "content"
      "navigation"
      "overview";
    gap: 10px;
  }

  .natal-overview-panel {
    padding-right: 230px;
  }

  .compatibility-overview-panel {
    grid-template-columns: minmax(190px, 260px) 1px minmax(190px, 260px) minmax(0, 1fr);
    gap: 20px;
  }
}

@media (max-width: 860px) {
  .natal-overview-panel {
    grid-template-columns: minmax(220px, 1fr) 1px minmax(190px, .8fr);
    gap: 22px;
    padding-right: 96px;
  }

  .compatibility-overview-panel {
    grid-template-columns: minmax(180px, 1fr) 1px minmax(180px, 1fr);
    gap: 18px;
    padding-right: 96px;
  }

  .natal-overview-facts {
    grid-template-columns: minmax(0, max-content);
    margin-left: 0;
  }

  .workspace-south-chart-watermark {
    right: -58px;
    bottom: -96px;
    width: 230px;
    height: 230px;
    opacity: .05;
  }
}

@media (max-width: 620px) {
  .workspace-sheet-hero[data-analytics-sheet-header] {
    max-width: 100%;
    padding: 0;
    overflow: hidden;
  }

  .workspace-sheet-hero[data-analytics-sheet-header] .workspace-sheet-hero__title {
    font-size: 24px;
  }

  .workspace-sheet-hero[data-analytics-sheet-header] > .workspace-sheet-hero__content {
    padding-left: 0;
  }

  .workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab.is-new-sheet {
    padding-left: 15px;
  }

  .workspace-sheet-hero > .workspace-sheet-bar.workspace-unified-tabbar[data-active-chart-header] {
    align-items: flex-start;
    min-height: 0;
    overflow: visible;
  }

  .workspace-sheet-hero > .workspace-unified-tabbar .workspace-sheet-tabs {
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0 14px;
    min-height: 0;
    overflow: visible;
  }

  .workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab,
  .workspace-sheet-hero > .workspace-unified-tabbar .workspace-section-tab > [role="tab"] {
    height: 36px;
    min-height: 36px;
    line-height: 36px;
  }

  .workspace-sheet-hero > .workspace-unified-tabbar .workspace-edit-mode-toggle,
  .workspace-sheet-hero > .workspace-unified-tabbar [data-workspace-edit-toggle] {
    width: 30px;
    min-width: 30px;
  }

  .natal-overview-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    padding: 20px 20px 24px;
  }

  .compatibility-overview-panel {
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 12px;
    padding: 20px;
  }

  .compatibility-overview-person {
    gap: 9px;
  }

  .compatibility-overview-select {
    min-height: 26px;
    font-size: 17px;
  }

  .compatibility-overview-position {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 3px;
  }

  .compatibility-overview-position > span {
    font-size: 15px;
  }

  .compatibility-overview-position > strong {
    font-size: clamp(16px, 5.2vw, 23px);
  }

  .compatibility-overview-divider {
    width: 1px;
    height: 126px;
  }

  .compatibility-overview-panel .workspace-south-chart-watermark {
    opacity: .035;
  }

  .natal-overview-divider {
    width: 100%;
    height: 1px;
  }

  .natal-overview-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-right: 54px;
    margin-left: 0;
  }

  .natal-overview-facts strong {
    font-size: clamp(26px, 8vw, 34px);
  }

  .workspace-south-chart-watermark {
    right: -105px;
    bottom: -75px;
    width: 180px;
    height: 180px;
    opacity: .025;
  }
}

@media (max-width: 380px) {
  .compatibility-overview-panel {
    gap: 10px;
    padding: 16px;
  }

  .compatibility-overview-position {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .natal-overview-facts {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 46px;
  }

}

@media (max-width: 340px) {
  .compatibility-overview-panel {
    gap: 8px;
    padding: 12px;
  }

  .compatibility-overview-position {
    gap: 2px;
  }
}

/* The shared analytical header is the only visual header surface. Its host is
   layout-only: no legacy panel may sit behind the title/navigation/summary,
   and the summary ends exactly 8px before the workspace widget grid. */
.workspace-sheet-hero-host:has(> .workspace-sheet-hero[data-analytics-sheet-header]) {
  min-width: 0;
  margin-block: 0 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.custom-sheet-workspace-actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 8px;
}

.custom-sheet-workspace-actions > button,
.custom-sheet-empty-state > button {
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid #8b673d;
  border-radius: 8px;
  background: #8b673d;
  color: #fffdf8;
  font: 600 14px/1.2 var(--vs-account-font-sans, Inter, system-ui, sans-serif);
  cursor: pointer;
}

.custom-sheet-workspace-actions > button:hover,
.custom-sheet-empty-state > button:hover {
  border-color: #765331;
  background: #765331;
}

.custom-sheet-workspace-actions > button:focus-visible,
.custom-sheet-empty-state > button:focus-visible {
  outline: 2px solid #8b673d;
  outline-offset: 2px;
}

.workspace-empty-sheet.custom-sheet-empty-state {
  gap: 16px;
  min-height: clamp(280px, 40svh, 410px);
  padding: 40px 20px;
  border: 1px solid var(--vs-account-line, #d3d7d2);
  border-radius: 10px;
  background: var(--vs-account-surface, #fdfdfc);
}

.workspace-empty-sheet.custom-sheet-empty-state h2 {
  font-family: var(--vs-account-font-sans, Inter, system-ui, sans-serif);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.workspace-empty-sheet.custom-sheet-empty-state > button {
  margin-top: 0;
}

@media (max-width: 620px) {
  .custom-sheet-overview-panel {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }

  .custom-sheet-overview-row {
    grid-template-columns: 82px minmax(0, 1fr) 20px;
  }

  .custom-sheet-workspace-actions {
    margin-bottom: 8px;
  }

  .custom-sheet-workspace-actions > button {
    width: 100%;
  }

  .workspace-empty-sheet.custom-sheet-empty-state {
    min-height: 300px;
    padding: 32px 16px;
  }
}

/* A periods widget beside a chart follows the chart-owned desktop row height.
   The list remains the scroll container, so resizing never creates a dead area
   under the period controls. Stacked tablet/mobile widgets keep their own size. */
@media (min-width: 901px) {
  .workspace-row:has(> .workspace-widget-chart) > .periods-panel:not(.is-collapsed) {
    align-self: stretch;
    box-sizing: border-box;
    height: 100% !important;
    min-height: 0;
    max-height: none;
  }

  .workspace-row:has(> .workspace-widget-chart) > .periods-panel:not(.is-collapsed) > .workspace-widget-body {
    height: auto;
    min-height: 0;
  }

  .workspace-row:has(> .workspace-widget-chart) > .periods-panel:not(.is-collapsed) .periods-view {
    height: 100%;
    min-height: 0;
  }
}

/* The Today route has one card immediately below the application top bar.
   Keep its outer air, but reduce the former combined 30-40 px inset to about
   one third without changing the card's own internal padding. */
.account-main:has(> .today-page:not([hidden])) {
  padding-top: 4px;
}

.today-page > [data-today-view-root] > .today-dashboard {
  padding-top: clamp(4px, .55vw, 8px);
}

@media (max-width: 760px) {
  .account-main:has(> .today-page:not([hidden])) {
    padding-top: 3px;
  }

  .today-page > [data-today-view-root] > .today-dashboard {
    padding-top: 3px;
  }
}

/* Chart-row height must not depend on serialized inline-style whitespace.
   The previous [style*="--workspace-columns:3;"] selector missed persisted
   rows whose CSS declaration was normalized, leaving grid-auto-rows:auto and
   allowing a long periods list to enlarge both neighbouring charts. */
@media (min-width: 1181px) {
  .account-app .workspace-row:has(> .workspace-widget-chart) {
    grid-auto-rows: min(
      var(--workspace-unit-height),
      calc(33.333cqw + var(--workspace-widget-header-height) - 4px)
    ) !important;
  }

  .account-app .workspace-row:has(> .workspace-widget-chart .workspace-chart-footer:not(:empty)) {
    grid-auto-rows: min(
      var(--workspace-unit-height),
      calc(33.333cqw + var(--workspace-widget-header-height) + var(--workspace-chart-footer-height, 50px) - 4px)
    ) !important;
  }

  .account-app .workspace-row:has(> .workspace-widget-chart[data-widget-span-x="2"]) {
    grid-auto-rows: min(
      var(--workspace-unit-height),
      calc(66.667cqw + var(--workspace-widget-header-height) - 7px)
    ) !important;
  }

  .account-app .workspace-row:has(> .workspace-widget-chart[data-widget-span-x="3"]) {
    grid-auto-rows: var(--workspace-unit-height) !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .account-app .workspace-row:has(> .workspace-widget-chart) {
    grid-auto-rows: min(
      var(--workspace-unit-height),
      calc(50cqw + var(--workspace-widget-header-height) - 3px)
    ) !important;
  }

  .account-app .workspace-row:has(> .workspace-widget-chart .workspace-chart-footer:not(:empty)) {
    grid-auto-rows: min(
      var(--workspace-unit-height),
      calc(50cqw + var(--workspace-widget-header-height) + var(--workspace-chart-footer-height, 50px) - 3px)
    ) !important;
  }

  .account-app .workspace-row:has(> .workspace-widget-chart[data-widget-span-x="2"]),
  .account-app .workspace-row:has(> .workspace-widget-chart[data-widget-span-x="3"]) {
    grid-auto-rows: var(--workspace-unit-height) !important;
  }
}

@container (min-width: 761px) and (max-width: 1080px) {
  .account-app .workspace-row:has(> .workspace-widget-chart) {
    grid-auto-rows: min(
      var(--workspace-unit-height),
      calc(50cqw + var(--workspace-widget-header-height) - 3px)
    ) !important;
  }

  .account-app .workspace-row:has(> .workspace-widget-chart .workspace-chart-footer:not(:empty)) {
    grid-auto-rows: min(
      var(--workspace-unit-height),
      calc(50cqw + var(--workspace-widget-header-height) + var(--workspace-chart-footer-height, 50px) - 3px)
    ) !important;
  }

  .account-app .workspace-row:has(> .workspace-widget-chart[data-widget-span-x="2"]),
  .account-app .workspace-row:has(> .workspace-widget-chart[data-widget-span-x="3"]) {
    grid-auto-rows: var(--workspace-unit-height) !important;
  }
}

/* Compact classical yoga cards: no truncation at narrow widths. */
.account-app .yoga-view-row { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 10px 12px; }
.account-app .yoga-view-row-copy { gap: 5px; min-width: 0; }
.account-app .yoga-result-title { margin: 0; white-space: normal; overflow: visible; line-height: 1.3; }
.account-app .yoga-result-why, .account-app .yoga-result-effect { margin: 0; white-space: normal; overflow: visible; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; color: var(--vs-account-ink); }
.account-app .yoga-result-effect strong { font-weight: 600; }
.account-app .yoga-inspector-scroll .yoga-result-effect { margin-top: 10px; }
@media (max-width: 600px) { .account-app .yoga-view-row { padding: 9px 10px; } }

.account-app .yoga-inspector { grid-template-rows: auto minmax(0, 1fr) auto; }
.account-app .yoga-inspector--desktop-panel { bottom: auto; height: auto; max-height: calc(100dvh - 100px); border: 1px solid var(--workspace-line); border-radius: 8px; }
.account-app .yoga-inspector-header { min-height: 0; padding: 10px 12px; }
.account-app .yoga-inspector-header h2 { white-space: normal; overflow: visible; line-height: 1.3; }
@media (max-width: 760px) { .account-app .yoga-inspector--bottom-sheet { top: auto; height: auto; max-height: min(68dvh, 640px); } }

/* Let the modal sheet and its backdrop rise above neighbouring widget headers. */
.account-app .yogas-widget > .workspace-widget-body:has([data-yoga-inspector]) { isolation: auto; }