/* Fatecove mobile layer: loaded last so small screens get a deliberate, touch-first layout
   without changing the existing paper, ink, midnight, and gold visual language. */
:root {
  --fatecove-nav-height: calc(64px + env(safe-area-inset-bottom, 0px));
}

html {
  min-width: 0;
  overflow-x: hidden;
}

body {
  min-width: 0;
  overflow-x: hidden;
  overflow-wrap: anywhere;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

.platformHeader,
.platformView,
.platformFooter,
.palmModule,
.pageNarrow,
.cxPage,
.opsRoot,
.legalPage,
.chart-view,
.member-view {
  min-width: 0;
  max-width: 100%;
}

.platformHeader {
  padding-inline: clamp(18px, 4vw, 46px);
}

.wordmark {
  min-width: 0;
  flex: 0 1 auto;
}

.wordmarkCopy {
  display: block;
  min-width: 0;
}

.cnWordmarkSeal {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #c5a777b8;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.05;
  text-align: center;
  transform: rotate(-4deg);
}

.headerTools {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(10px, 2vw, 22px);
}

.languageSwitch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  gap: 2px;
  padding: 2px 4px;
  border: 1px solid #c5a77755;
  border-radius: 999px;
  background: #10172bcc;
  color: #8f8d9e;
}

.languageSwitch button {
  min-width: 40px;
  min-height: 38px;
  padding: 6px 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9e9aaa;
  font: 11px/1 Arial, sans-serif;
  letter-spacing: .08em;
}

.languageSwitch button:hover,
.languageSwitch button.is-active,
.languageSwitch button[aria-pressed="true"] {
  background: #c5a777;
  color: #211c23;
}

.languageSwitch > span {
  color: #756d68;
  font-size: 10px;
}

.accountLink {
  min-width: 0;
  overflow-wrap: anywhere;
}

.platformView,
.palmModule {
  overflow-x: clip;
}

.platformView h1,
.platformView h2,
.platformView h3,
.platformView p,
.cxPage h1,
.cxPage h2,
.cxPage h3,
.cxPage p,
.opsRoot h1,
.opsRoot h2,
.opsRoot h3,
.opsRoot p,
.legalPage h1,
.legalPage h2,
.legalPage h3,
.legalPage p,
.legalPage li,
.orderThread,
.orderThread * {
  overflow-wrap: anywhere;
}

button,
.goldButton,
.outlineButton,
.chart-link-primary,
.chart-preview-button,
.member-primary-link,
.opsRoot .opsButton,
.orderThreadRefresh,
.payAdminThreadLink,
.legalButton {
  min-height: 44px;
}

/* Keep the header legible on compact laptops before the mobile breakpoint. */
@media (max-width: 1099px) and (min-width: 700px) {
  .platformHeader {
    height: 78px;
    gap: 14px;
    padding-inline: 24px;
  }

  .desktopNav {
    gap: 12px;
    font-size: 11px;
  }

  .wordmark {
    font-size: 20px;
    letter-spacing: 3px;
  }

  .wordmark small {
    font-size: 7px;
    letter-spacing: 1.2px;
  }

  .headerTools {
    gap: 10px;
  }

  .accountLink {
    max-width: 92px;
    white-space: normal;
    line-height: 1.45;
    text-align: right;
  }
}

@media (max-width: 699px) {
  body {
    padding-bottom: calc(var(--fatecove-nav-height) + 8px);
  }

  .platformHeader {
    position: sticky;
    z-index: 60;
    top: 0;
    min-height: 68px;
    height: auto;
    gap: 9px;
    padding: 9px 14px;
    background: #070a15ee;
    border-bottom-color: #c5a7773d;
    backdrop-filter: blur(18px);
  }

  .wordmark {
    gap: 8px;
    max-width: 34%;
    font-size: 19px;
    letter-spacing: 2px;
  }

  .cnWordmarkSeal {
    width: 32px;
    height: 32px;
    font-size: 10px;
  }

  .wordmarkCopy {
    white-space: nowrap;
  }

  .wordmark small {
    max-width: 92px;
    overflow-wrap: anywhere;
    white-space: normal;
    font-size: 6px;
    letter-spacing: .7px;
    line-height: 1.35;
  }

  .headerTools {
    flex: 1 1 auto;
    gap: 7px;
  }

  .accountLink {
    max-width: 78px;
    white-space: normal;
    font-size: 10px;
    line-height: 1.45;
    text-align: right;
  }

  .languageSwitch {
    margin-left: auto;
  }

  .languageSwitch button {
    min-width: 39px;
    min-height: 38px;
    padding-inline: 5px;
  }

  .platformView {
    padding-bottom: 22px;
  }

  /* Five equal, thumb-sized targets; padding includes the device safe area. */
  .mobileNav {
    display: flex;
    z-index: 70;
    align-items: stretch;
    justify-content: stretch;
    gap: 2px;
    min-height: var(--fatecove-nav-height);
    padding: 7px 5px calc(7px + env(safe-area-inset-bottom, 0px));
  }

  .mobileNav a {
    display: flex;
    flex: 1 1 20%;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 4px 2px;
    gap: 3px;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .mobileNav a > span {
    flex: 0 0 22px;
    line-height: 1;
  }

  .palmModule {
    width: 100%;
  }

  .palmBridge {
    min-height: 44px;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.6;
  }

  .palmBridge a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .palmModule iframe {
    width: 100%;
    height: calc(100svh - 182px);
    min-height: 540px;
  }

  /* iOS Safari zooms controls below 16px; keep every editable control at 16px. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .chart-field input,
  .chart-field select,
  .cxField select,
  .cxField textarea,
  .orderThreadField input,
  .orderThreadField select,
  .orderThreadField textarea,
  .opsRoot .opsField select,
  .opsRoot .opsField textarea,
  .opsRoot .opsDraft {
    min-width: 0;
    font-size: 16px !important;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-height: 18px;
    font-size: inherit;
  }

  .platformFooter {
    min-width: 0;
    width: auto;
    margin-inline: 20px;
    padding-inline: 0;
  }

  .platformFooter,
  .footerLinks,
  .legalFooterNav {
    overflow-wrap: anywhere;
  }

  /* Chart panels keep every grid item shrinkable and let long English copy wrap. */
  .chart-view,
  .member-view {
    width: 100%;
    overflow-x: hidden;
  }

  .chart-hero,
  .member-hero {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(64px, 88px);
  }

  .chart-hero-copy,
  .member-hero > div,
  .chart-panel-heading,
  .member-panel-heading,
  .chart-board-heading,
  .chart-form-grid,
  .chart-date-row,
  .chart-form-foot,
  .chart-pillar,
  .chart-daymaster-card,
  .chart-elements-card,
  .member-feature-card {
    min-width: 0;
  }

  .chart-date-row {
    grid-template-columns: minmax(0, 1fr) 15px minmax(0, 1fr) 15px minmax(0, 1fr);
  }

  .chart-date-row > span {
    text-align: center;
  }

  .chart-field input,
  .chart-field select,
  .chart-date-row label,
  .chart-date-row label input {
    max-width: 100%;
  }

  .chart-element-grid {
    min-width: 0;
  }

  .chart-tabs {
    max-width: 100%;
    scrollbar-width: thin;
  }

  .chart-tab {
    flex: 0 0 auto;
  }

  /* Product cards and checkout snapshots remain one readable column. */
  .cxPage,
  .cxPage > *,
  .cxPriceCards,
  .cxPriceCard,
  .cxCheckoutLayout,
  .cxCheckoutLayout > *,
  .cxOrderSummary,
  .cxFourPillars,
  .cxEssence,
  .cxDetailHero,
  .cxDetailHero > *,
  .cxSamplePages,
  .cxSamplePages > * {
    min-width: 0;
    max-width: 100%;
  }

  .cxCardTop {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .cxPrice {
    flex-wrap: wrap;
    max-width: 100%;
    font-size: clamp(32px, 11vw, 42px);
  }

  .cxPriceCard .goldButton,
  .cxPriceCard .outlineButton,
  .cxCheckout form > .goldButton {
    width: 100%;
    min-width: 0;
  }

  .cxDirectionLinks > a,
  .cxReadingMeta,
  .cxQuestionPrice,
  .cxFreeStrip {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* The paper thread has a bounded message rail, but message text never clips. */
  .orderThread,
  .orderThreadHeader,
  .orderThreadHeaderTags,
  .orderThreadMessage,
  .orderThreadMessageMeta,
  .orderThreadComposer,
  .orderThreadField,
  .orderThreadConfirm {
    min-width: 0;
    max-width: 100%;
  }

  .orderThreadMessage {
    overflow-wrap: anywhere;
  }

  .orderThreadField textarea,
  .orderThreadField select,
  .orderThreadAttachmentField input {
    width: 100%;
    max-width: 100%;
  }

  /* Legal pages are intentionally long-form: preserve readable line length and links. */
  .legalPage,
  .legalHeader,
  .legalToc,
  .legalPaper,
  .legalSection,
  .legalCollectionNotice,
  .legalAiInvitation {
    min-width: 0;
    max-width: 100%;
  }

  .legalLocalNav {
    min-width: 0;
  }

  .legalLocalNav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    overflow-wrap: anywhere;
  }

  .legalSection p,
  .legalSection li,
  .legalFooter a {
    overflow-wrap: anywhere;
  }

  /* Operations/order screens can contain IDs and customer-authored text. */
  .opsRoot,
  .opsRoot > *,
  .opsRoot .opsCard,
  .opsRoot .opsCard > *,
  .opsRoot .opsMetaGrid,
  .opsRoot .opsSnapshotGrid,
  .opsRoot .opsAdminMeta,
  .opsRoot .opsAdminWorkspace,
  .opsRoot .opsReportPaper,
  .opsRoot .opsChapter {
    min-width: 0;
    max-width: 100%;
  }

  .opsRoot code,
  .opsRoot strong,
  .opsRoot small,
  .opsRoot p,
  .opsRoot .opsReportList span,
  .opsRoot .opsReportFooter span {
    overflow-wrap: anywhere;
  }

  .opsRoot .opsButton,
  .opsRoot .opsMiniButton,
  .opsRoot .opsIconButton {
    min-width: 44px;
  }
}

@media (max-width: 420px) {
  .platformHeader {
    padding-inline: 10px;
  }

  .wordmark {
    max-width: 31%;
    font-size: 17px;
  }

  .wordmark small {
    max-width: 76px;
    font-size: 5.5px;
  }

  .accountLink {
    max-width: 67px;
    font-size: 9px;
  }

  .languageSwitch {
    gap: 0;
    padding-inline: 2px;
  }

  .languageSwitch button {
    min-width: 36px;
    padding-inline: 3px;
  }

  .chart-hero,
  .member-hero {
    grid-template-columns: minmax(0, 1fr) 70px;
    padding-inline: 15px;
  }

  .chart-orbit {
    transform: rotate(-18deg) scale(.68);
    transform-origin: center;
  }

  .chart-input-panel,
  .member-profile-panel,
  .chart-board,
  .member-grid,
  .member-ivory-block,
  .chart-footer,
  .member-footer {
    margin-inline: 10px;
  }

  .chart-date-row {
    grid-template-columns: minmax(0, 1fr) 11px minmax(0, 1fr) 11px minmax(0, 1fr);
    gap: 3px;
  }

  .cxPage {
    padding-inline: 17px;
  }

  .orderThread {
    padding-inline: 14px;
  }

  .legalPage {
    padding-inline: 14px;
  }
}

@media (max-width: 360px) {
  .wordmark {
    gap: 5px;
    font-size: 16px;
    letter-spacing: 1px;
  }

  .cnWordmarkSeal {
    width: 29px;
    height: 29px;
  }

  .accountLink {
    max-width: 60px;
  }

  .mobileNav {
    padding-inline: 2px;
  }

  .mobileNav a {
    min-width: 44px;
    font-size: 9px;
  }

  .mobileNav a > span {
    flex-basis: 20px;
    font-size: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platformHeader {
    scroll-behavior: auto;
  }
}

/* International introduction; retain the modern Chinese paper-and-ink identity. */
.cnWordmarkSeal { color:#fff4e5; background:var(--seal); border:1px solid #b37961; transform:none; }
.languageSwitch { background:#e9dfcd; color:var(--ink); border-color:#c7b69b; }
.languageSwitch button { color:#6c5b45; }
.languageSwitch button.is-active,.languageSwitch button[aria-pressed="true"] { background:var(--seal); color:#fff9ed; }
.intlBaziIntro { margin:15px 44px 60px; padding:32px 0; border-block:1px solid var(--rule); }
.intlBaziIntro header { max-width:820px; }
.intlBaziIntro h2 { font-size:30px; margin:14px 0 18px; line-height:1.4; }
.intlBaziIntro p { font-size:15px; line-height:1.85; }
.intlBaziTerms { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin:25px 0; }
.intlBaziTerms dt { font-size:20px; margin:12px 0; color:var(--ink); }
.intlBaziTerms dt small { color:var(--gold); margin-left:10px; font-size:14px; }
.intlBaziTerms dd { margin:0; font-size:14px; line-height:1.85; color:var(--soft-ink); }
.intlBaziActions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.intlBaziIntro .intlSupportNote { margin-top:23px; padding:15px 18px; background:#ece4d4; font-size:12px; line-height:1.8; }
html[lang="en"] .wordmark { letter-spacing:.3px; font-family:Georgia,serif; }
html[lang="en"] .cnHero h1 { line-height:1.35; }
html[lang="en"] h2,html[lang="en"] h3 { line-height:1.45; }
html[lang="en"] .cxReadingChapter h3 { line-height:1.45; }
html[lang="en"] .cxPriceCards .cxSuitable { min-height:0; }
@media(max-width:699px){
 .platformHeader {background:#f4f0e6f5;border-color:#cdbda2;}
 .wordmark {max-width:none;flex:1 1 auto;}
 .wordmark small {display:none;}
 .headerTools {flex:0 0 auto;}
 .languageSwitch button {min-height:44px;min-width:44px;}
 .accountLink {font-size:11px;max-width:73px;}
 html[lang="en"] .wordmark {font-size:19px;}
 .intlBaziIntro {margin:10px 20px 38px;padding:26px 0;}
 .intlBaziTerms{grid-template-columns:1fr;gap:14px;}
 .intlBaziTerms>div+div{border-top:1px solid var(--rule);padding-top:10px;}
 .intlBaziIntro h2{font-size:26px;}
 .intlBaziActions{align-items:stretch;flex-direction:column;gap:14px;}
 body[data-route="fortune"] .platformHeader,body[data-route="palm"] .platformHeader {background:#191d19f2;border-color:#b9a98333;}
 html[lang="en"] .desktopNav {display:none;}
}