.marks-workspace { display: grid; gap: 24px; width: min(1180px, calc(100% - 36px)); margin-inline: auto; padding-bottom: 48px; }
html:has(.marks-workspace) { scrollbar-gutter: stable; }
.marks-workspace > .page-hero { width: 100%; min-height: 0; margin: 0; padding: 48px 0 8px; }
.marks-workspace > .page-hero h1 { margin: 8px 0 12px; }
.marks-workspace > .page-hero p { margin-block: 0; }
/* These are stacked page sections, not the shared sticky sidebar pattern. */
.marks-workspace > .info-panel { position: static; top: auto; min-width: 0; }
.marks-workspace > .form-card { min-width: 0; }
.marks-workspace h2 { margin: 0 0 16px; }
.marks-workspace #marks-status:empty { display: none; }
.marks-workspace #marks-status { margin: 16px 0 0; }
.marks-workspace fieldset { border: 0; padding: 0; min-width: 0; margin: 0; }
.marks-workspace [hidden] { display: none !important; }
.marks-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 20px 0; }
.marks-source { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: rgba(20, 8, 42, .16); }
.marks-source h3 { margin: 0 0 16px; }
.marks-source label, .marks-source fieldset { display: grid; gap: 10px; }
.marks-source label { margin-bottom: 0; }
.marks-source fieldset { margin-top: 16px; gap: 16px; }
.marks-source .hint { margin: 0; font-size: 13px; }
.marks-source .place-list { margin: 0; max-height: 260px; overflow-y: auto; }
.marks-source .place-list p { margin: 0; }
.marks-date-time { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .65fr); gap: 14px; }
.marks-workspace input, .marks-workspace select { max-width: 100%; min-width: 0; }
.marks-form-actions, .marks-advanced { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.marks-form-actions { justify-content: flex-start; margin-top: 24px; }
.marks-result h2 { overflow-wrap: anywhere; }
.marks-result { width:min(1180px,calc(100vw - 40px)); justify-self:center; scroll-margin-top:100px; }
.marks-workspace .marks-result h2 { margin:0 0 8px; }
.marks-result details { margin-top: 22px; }
.marks-result summary { cursor: pointer; padding-block: 10px; }
.marks-result .synastry-wheel__positions summary { padding:0; }
.marks-wheel-wrap { position: relative; max-width: 1000px; margin: 20px auto 30px; padding-right: 140px; }
.marks-wheel-wrap .natal-chart-wheel { width: min(100%, 720px); }
.marks-legend { position: absolute; right: 0; bottom: 8%; display: grid; gap: 8px; font-size: 13px; }
.marks-legend span::before { content: ""; width: 18px; border-top: 2px solid #a88b58; display: inline-block; margin-right: 7px; vertical-align: middle; }
.marks-legend span:nth-child(2)::before { border-color: #4a7c9b; }
.marks-legend span:nth-child(3)::before { border-color: #b3586c; }
.marks-positions, .marks-aspects, .marks-houses { box-sizing:border-box; width:100%; max-width:none; margin-inline:0; }
.marks-data-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; width:100%; margin-top:28px; align-items:stretch; }
.marks-data-pair > :is(.marks-positions,.marks-houses) { min-width:0; margin-top:0; }
.marks-data-card { display:flex; flex-direction:column; min-width:0; padding:24px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:var(--shadow); backdrop-filter:blur(14px); color:var(--text); }
.marks-data-card > h3,
.marks-data-card .house-ruler-heading h3 { margin:0 0 .5em; color:var(--text); font-size:1.17em; line-height:normal; letter-spacing:normal; }
.marks-data-card > .hint,
.marks-data-card .house-ruler-heading .hint { margin:0; }
.marks-data-card .house-ruler-heading { display:block; }
.marks-placement-single,
.marks-house-inner { flex:1; margin-top:16px; }
.marks-data-pair .synastry-placement-table { min-width:430px; }
.marks-data-pair .synastry-placement-table--with-motion { min-width:0; }
.marks-data-pair .synastry-placement-table :is(th,td),
.marks-data-pair .house-ruler-table :is(th,td) { white-space:nowrap; overflow-wrap:normal; }
.marks-data-pair .house-ruler-table { min-width:0; }
.marks-houses .house-ruler-col-house { width:17.5%; }
.marks-houses .house-ruler-col-cusp { width:25%; }
.marks-houses .house-ruler-col-ruler { width:16%; }
.marks-houses .house-ruler-col-sign { width:25%; }
.marks-houses .house-ruler-col-placement { width:16.5%; }
.marks-data-pair :is(.synastry-placement-scroll,.house-ruler-table-wrap) { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-color:var(--gold) transparent; }
.marks-aspect-head, .marks-aspect-row { display: grid; grid-template-columns: 60px 40px 60px minmax(96px, 1fr); align-items: center; gap: 8px; padding: 10px 0; }
.marks-aspect-heads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.marks-aspect-head { border-bottom: 1px solid #bba57c66; font-size: 13px; opacity: .8; }
.marks-aspect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.marks-aspect-row { border-bottom: 1px solid #bba57c26; font-size: 14px; }
.marks-aspect-row strong, .marks-aspect-head span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.marks-aspect-row span { min-width: 0; white-space: nowrap; }
.marks-aspect-measure { display: flex; flex-direction: row; justify-content: flex-end; align-items: baseline; gap: 4px; white-space: nowrap; }
.marks-aspect-head span:last-child { white-space: nowrap; }
.marks-aspect-measure small { font-size: 12px; font-weight: 400; white-space: nowrap; }
.marks-aspect-heading-compact,
.marks-aspect-scroll-hint { display:none; }
.marks-result .synastry-aspect-heading,
.marks-result .synastry-aspect-row {
  min-width:0;
  grid-template-columns:minmax(0,1fr) minmax(48px,.45fr) minmax(0,1fr) minmax(112px,.75fr);
}
.marks-positions { margin-top: 28px; }
.marks-placement-grid h4 { margin-block: 14px; }
.marks-placement-single { width:100%; max-width:none; }
.marks-cusps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.marks-cusps p { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.marks-result small { overflow-wrap: anywhere; }
.marks-advanced { padding: 24px; }
.marks-advanced button:disabled { opacity: .65; cursor: default; }
.marks-settings-backdrop { position: fixed; inset: 0; z-index: 1000; background: #130c26a6; display: flex; justify-content: center; align-items: flex-end; }
.marks-settings { box-sizing: border-box; width: min(100%, 650px); max-height: 85dvh; overflow: auto; background: #faf8ff; color: #281735; padding: 24px 28px max(24px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; box-shadow: 0 -12px 60px #0005; }
.marks-settings { overscroll-behavior: contain; }
body:has(.marks-settings-backdrop) { overflow: hidden; }
.marks-settings header { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 1; background: #faf8ff; padding-block: 12px; box-shadow: 0 -24px 0 #faf8ff; }
.marks-settings header h2 { margin: 0; }
.marks-settings header button { width: 44px; height: 44px; border: 1px solid #cabbd7; border-radius: 50%; font-size: 24px; cursor: pointer; }
.marks-settings h2, .marks-settings label, .marks-settings p, .marks-settings summary { color: #281735; }
.marks-settings p { font-size: 13px; }
.marks-settings input { color: #281735; background: white; accent-color: #63477a; }
.marks-settings button { color: #281735; background: #eee7f5; border-color: #cabbd7; }
.marks-settings-tabs { display: flex; gap: 8px; margin: 16px 0; }
.marks-settings-tabs button { flex: 1; border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; font-weight: 700; padding: 9px; }
.marks-settings-tabs button[aria-selected="true"] { border-color: #b58b46; color: #4c347e; }
.marks-setting-list { display: grid; gap: 8px; padding-right: 2px; }
.marks-settings-group { margin: 10px 0; border: 1px solid #4c347e29; border-radius: 8px; background: #ffffff6b; overflow: hidden; }
.marks-settings-group summary { display: flex; padding: 11px 12px; font-weight: 800; }
.marks-settings-group .marks-setting-list { padding: 0 9px 9px; }
.marks-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px 38px; gap: 10px; align-items: center; min-height: 44px; margin: 0; padding: 7px 9px; border: 1px solid #4c347e29; border-radius: 7px; color: #281735; font-size: .92rem; }
.marks-strict { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 6px 0; font-weight: 700; }
.marks-setting-row input[type="number"] { width: 75px; padding: 8px; }
.marks-cap { display: flex; align-items: center; gap: 6px; }
.marks-visibility-toggle { width: 34px; height: 34px; padding: 0; border: 1px solid #4c347e3d; border-radius: 50%; background: #f7f3e9; color: #4c347e; font-size: 17px; }
.marks-visibility-toggle[aria-pressed="false"] { color: #a69bab; background: #f0edf3; }
.marks-strict input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.marks-strict i { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #d8d1df; transition: background .2s ease; }
.marks-strict i::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #1e152f4d; content: ""; transition: transform .2s ease; }
.marks-strict input:checked + i { background: #4c347e; }
.marks-strict input:checked + i::after { transform: translateX(18px); }
.marks-strict input:focus-visible + i { outline: 2px solid #b58b46; outline-offset: 2px; }
.marks-setting-reference { margin: 0 0 12px; color: #746783 !important; font-size: .82rem !important; line-height: 1.5; }
.marks-settings details { margin: 12px 0; }
.marks-settings summary { cursor: pointer; padding-block: 12px; }
.marks-settings :is(button, input, summary):focus-visible { outline: 2px solid #63477a; outline-offset: 3px; }
@media (max-width: 760px) {
  .marks-workspace { width: calc(100% - 24px); gap: 18px; }
  .marks-workspace > .page-hero { padding-top: 32px; }
  .marks-source-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .marks-source { padding: 16px; }
  .marks-wheel-wrap { padding-right: 0; }
  .marks-legend { position: static; display: flex; justify-content: center; flex-wrap: wrap; font-size: 12px; margin-top: 18px; }
  .marks-aspect-grid { grid-template-columns: minmax(0, 1fr); }
  .marks-aspect-head { padding-right: 0; }
  .marks-aspect-heads { grid-template-columns: minmax(0, 1fr); }
  .marks-aspect-head:nth-child(2) { display: none; }
  .marks-cusps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marks-settings { padding-inline: 20px; }
  .marks-result .synastry-aspect-heading,
  .marks-result .synastry-aspect-row {
    min-width:0;
    grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) minmax(86px,.9fr);
    gap:6px;
  }
  .marks-result .synastry-aspect-heading > span { white-space:normal; overflow-wrap:anywhere; }
  .marks-result .synastry-aspect-heading > span:last-child { white-space:nowrap; }
  .marks-result .marks-aspect-body { overflow-wrap:anywhere; }
  .marks-aspect-heading-full { display:none; }
  .marks-aspect-heading-compact { display:inline; }
}
@media (max-width: 920px) {
  .marks-data-pair { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 400px) {
  .marks-date-time, .marks-cusps { grid-template-columns: minmax(0, 1fr); }
  .marks-aspect-row, .marks-aspect-head { gap: 5px; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 90px; font-size: 13px; }
}
@media (max-width: 420px) {
  .marks-result { width:calc(100vw - 16px); padding:10px; }
  .marks-data-card { padding:8px; }
  .marks-data-pair .synastry-overlay-group { padding:4px; }
  .marks-data-pair .synastry-placement-table--with-motion { min-width:0; font-size:.74rem; }
  .marks-data-pair .synastry-placement-table--with-motion th,
  .marks-data-pair .synastry-placement-table--with-motion td { padding-inline:1px; }
  .marks-data-pair .synastry-placement-table--with-motion th:nth-child(1) { width:17%; }
  .marks-data-pair .synastry-placement-table--with-motion th:nth-child(2) { width:38%; }
  .marks-data-pair .synastry-placement-table--with-motion th:nth-child(3) { width:33%; }
  .marks-data-pair .synastry-placement-table--with-motion th:nth-child(4) { width:12%; }
  .marks-data-pair .synastry-placement-table--with-motion .dignity-badge { min-width:0; min-height:0; margin-left:1px; padding:1px 2px; }
}
@media (max-width: 340px) {
  .marks-result .synastry-aspect-heading,
  .marks-result .synastry-aspect-row { min-width:420px; grid-template-columns:118px 46px 118px 100px; gap:10px; }
  .marks-data-pair .synastry-placement-table--with-motion { min-width:0; font-size:.72rem; }
  .marks-aspect-scroll-hint { display:block; width:420px; margin:0 0 8px; color:var(--gold-2); font-size:.8rem; }
}

/* The shared comparison grid already reserves its legend column. Extra padding shifts the disc. */
.marks-result .synastry-wheel { padding: 0; }
.marks-houses { margin-top:28px; }
.marks-house-scroll-hint { display:none; margin:8px 0 0; font-size:12px; }
.marks-houses .house-ruler-table-wrap { max-width:100%; }
.marks-houses .house-ruler-table-wrap:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.marks-calculation-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.marks-calculation-summary p { display:grid; gap:4px; margin:0; padding:12px; border:1px solid #bba57c33; border-radius:8px; }
.marks-placement-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.marks-placement-grid > section { min-width:0; }
@media(max-width:760px) {
  .marks-placement-grid { grid-template-columns:minmax(0,1fr); }
  .marks-calculation-summary { grid-template-columns:minmax(0,1fr); }
  .marks-house-scroll-hint { display:none; }
  .marks-houses .house-ruler-table-wrap { overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-color:var(--gold) transparent; }
  .marks-houses .house-ruler-table { min-width:0; font-size:.78rem; }
  .marks-houses .house-ruler-table th,.marks-houses .house-ruler-table td { padding-inline:3px; }
  .marks-houses .house-ruler-sign-cell,.marks-houses .house-ruler-table td[rowspan] { white-space:nowrap; }
}
@media(max-width:360px) {
  .marks-houses .house-ruler-table { font-size:.72rem; }
  .marks-houses .house-ruler-table thead { font-size:.72rem; letter-spacing:0; }
  .marks-houses .house-ruler-table th,.marks-houses .house-ruler-table td { padding-inline:1px; }
}
/* These two tables may scroll inside their own half-card; one field must stay on one line. */
.marks-data-pair .synastry-placement-table :is(th,td),
.marks-data-pair .house-ruler-table :is(th,td) { white-space:nowrap; overflow-wrap:normal; }
/* On narrow screens these controls belong after the chart, so they cannot cover table cells. */
@media(max-width:1200px) {
  body:has(.marks-workspace) :is(.support-dock, .translation-dock) { position: relative; right: auto; bottom: auto; vertical-align: middle; margin-bottom: 24px; }
  body:has(.marks-workspace) .support-dock { display: inline-grid; margin-left: 12px; margin-right: 12px; }
  body:has(.marks-workspace) .translation-dock { display: inline-block; }
  body:has(.marks-workspace) .translation-panel { left: -64px; right: auto; max-width: calc(100vw - 24px); }
}