/* Compact, fluid homepage layouts; loaded after the shared theme. */
.home-page {
  --home-space: clamp(4px, 1vw, 8px);
  --home-gap: clamp(4px, 0.8vw, 8px);
  --home-text: clamp(11px, 10px + 0.3vw, 13px);
  --home-small: clamp(10px, 9px + 0.3vw, 12px);
  --home-heading: clamp(13px, 11px + 0.8vw, 18px);
  --home-subheading: clamp(12px, 10px + 0.6vw, 15px);
  --home-result: clamp(16px, 13px + 1vw, 20px);
  font-size: var(--home-text);
  line-height: 1.45;
}

.home-page > header,
.home-page > main,
.home-page > footer > div {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

.home-page > header,
.home-page > main {
  padding-inline: clamp(3px, 0.8vw, 8px) !important;
}

.home-page main :is(section, article, nav, header),
.home-page .d-flex > * {
  min-width: 0;
  max-width: 100%;
}

/* Allow long market names and text zoom to wrap rather than clip. */
.home-page :is(h1, h2, h3, p, a, time, strong) {
  overflow-wrap: anywhere;
}

.home-page :is(p, h1, h2, h3).line-height-1 {
  line-height: 1.3 !important;
}

.home-page .line-height-18 {
  line-height: 1.45 !important;
}

.home-page :is(.fs-10, .fs-11) {
  font-size: var(--home-small) !important;
}

.home-page :is(.fs-12, .fs-13, .fs-14) {
  font-size: var(--home-text) !important;
}

.home-page :is(.fs-15, .fs-16, .fs-18, .fs-20, .fs-22) {
  font-size: var(--home-heading) !important;
}

.home-page .fs-26 {
  font-size: clamp(18px, 14px + 1.4vw, 24px) !important;
}

.home-page :is(.p-2, .px-2) {
  padding-inline: var(--home-space) !important;
}

.home-page :is(.p-2, .py-2) {
  padding-block: var(--home-space) !important;
}

.home-page .py-3 {
  padding-block: clamp(8px, 1.5vw, 14px) !important;
}

.home-page :is(.gap-1, .gap-2) {
  gap: var(--home-gap) !important;
}

.home-page :is(.mb-2, .my-2) {
  margin-bottom: var(--home-gap) !important;
}

.home-page :is(.mt-2, .my-2) {
  margin-top: var(--home-gap) !important;
}

.home-page .dpboss-brand-box {
  padding: var(--home-space);
}

.home-page .dpboss-logo,
.home-page .dpboss-logo span {
  font-size: clamp(18px, 13px + 2.4vw, 28px);
  letter-spacing: 0;
  line-height: 1.25;
}

.home-page .dpboss-domain {
  font-size: var(--home-small);
  letter-spacing: 0;
}

.home-page #intro h1 {
  font-size: clamp(14px, 11px + 0.9vw, 18px) !important;
}

.home-page #intro p {
  text-align: center !important;
}

.home-page #intro p + p {
  margin-top: 4px !important;
}

#homepage main > section h2 {
  font-size: var(--home-heading) !important;
  line-height: 1.3 !important;
}

.home-page .dpboss-pill-banner {
  padding: 5px var(--home-space) !important;
}

.home-page .dpboss-lucky-box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: var(--home-gap);
}

.home-page .lucky-divider {
  height: 100%;
}

.home-page #goldenAnk {
  height: 36px;
  margin-top: 2px !important;
}

.home-page .lucky-digit {
  font-size: clamp(14px, 10px + 1.8vw, 22px) !important;
}

.home-page .lucky-sep {
  font-size: clamp(12px, 9px + 1.5vw, 18px) !important;
  margin-inline: 0 !important;
}

.home-page .final-ank-slider-wrapper {
  height: 36px;
  margin-top: 2px;
}

.home-page .final-ank-vertical-slider p {
  font-size: var(--home-small) !important;
  line-height: 18px !important;
  white-space: normal !important;
}

.home-page .home-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--home-gap);
}

.home-page .home-status-grid > div {
  padding-inline: 0 !important;
}

.home-page .home-status-grid .mt-1 {
  margin-top: 2px !important;
}

.home-page .last-updated-wrapper {
  gap: 4px;
}

.home-page .live-dot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
}

/* Results stay in one column on phones and use available space on tablets. */
.home-page #marketsContainer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  margin-top: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.home-page #marketsContainer .market-card {
  padding: var(--home-space) !important;
  border-width: 1px 0 0 !important;
  border-style: solid !important;
}

.home-page #marketsContainer .market-card h3,
.home-page #todaysMarketsContainer h3 {
  font-size: clamp(15px, 12px + 1vw, 19px) !important;
  line-height: 1.3 !important;
  letter-spacing: 0;
  margin: 0 !important;
}

.home-page #marketsContainer .market-card > p,
.home-page #todaysMarketsContainer > div > p:not(.pass-text) {
  font-size: var(--home-result) !important;
  line-height: 1.3 !important;
  letter-spacing: 0;
  margin: 2px 0 !important;
}

.home-page #marketsContainer .market-card-timings {
  flex-wrap: wrap;
  gap: 3px !important;
}

.home-page #marketsContainer .market-card-timings span {
  font-size: var(--home-small) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

.home-page .market-card-status {
  margin-top: 3px !important;
}

.home-page :is(.market-status-pill, .timing-status-badge) {
  max-width: 100%;
  padding: 2px 7px !important;
  font-size: var(--home-small) !important;
  white-space: normal !important;
}

.home-page :is(.result-explainer-item, .platform-info-item, .faq-item,
    .status-explain-card, .result-process-list, .platform-flow-box,
    .explainer-terms-grid .result-explainer-item) {
  padding: var(--home-space) !important;
}

.home-page :is(.result-explainer-item, .platform-info-item, .faq-item) h3 {
  font-size: var(--home-subheading) !important;
  line-height: 1.35 !important;
  margin-bottom: 3px !important;
}

.home-page :is(.platform-info-item, .faq-item) p,
.home-page .result-process-list p strong {
  font-size: var(--home-text) !important;
}

.home-page :is(.explainer-terms-grid, .faq-grid, .result-status-explanation) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--home-gap);
}

.home-page .result-example-box .d-flex {
  gap: 4px !important;
}

.home-page :is(.example-part-badge, .platform-flow-step) {
  max-width: 100%;
  padding: 3px 5px !important;
  font-size: var(--home-small) !important;
  overflow-wrap: anywhere;
}

.home-page .market-hub-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  padding: var(--home-space);
  gap: var(--home-gap);
}

.home-page .market-hub-card {
  padding: var(--home-space);
}

.home-page .m-card-top-row {
  gap: 6px;
}

.home-page .m-avatar {
  width: 26px;
  height: 26px;
  min-width: 26px;
  font-size: 14px;
}

.home-page .m-title {
  font-size: var(--home-subheading);
  white-space: normal;
  overflow: visible;
}

.home-page .m-features-list {
  margin-top: 3px;
  gap: 3px;
}

.home-page :is(.m-badge-tag, .m-feat-pill) {
  max-width: 100%;
  padding: 2px 4px;
  white-space: normal;
}

.home-page .m-desc-text {
  font-size: var(--home-text);
  margin-block: 4px;
}

.home-page .m-cta-bar {
  gap: 6px;
  min-height: 32px;
  padding: 4px 6px;
  font-size: var(--home-small);
}

.home-page :is(#jodiChartsContainer, #panelChartsContainer) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  gap: var(--home-gap) !important;
  padding: var(--home-space) !important;
}

.home-page .chart-market-link {
  min-width: 0;
  min-height: 36px;
  padding: 5px 6px !important;
  gap: 5px !important;
  border-radius: 4px !important;
  font-size: var(--home-text) !important;
  white-space: normal !important;
}

.home-page .chart-link-text {
  min-width: 0;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35;
}

.home-page :is(.chart-link-icon, .chart-link-arrow) {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  font-size: 12px !important;
}

.home-page :is(.btn-refresh-market, .dpboss-refresh-pill-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 28px;
  max-width: 100%;
  padding: 4px 8px !important;
  border: 1px solid var(--dpboss-border) !important;
  border-radius: 4px !important;
  font-size: var(--home-small) !important;
  line-height: 1.25;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none !important;
  transform: none !important;
}

.home-page .dpboss-refresh-pill-btn {
  right: max(6px, env(safe-area-inset-right));
  bottom: max(6px, env(safe-area-inset-bottom));
  max-width: calc(100% - 12px);
}

.home-page :is(.dpboss-refresh-pill-btn, .btn-refresh-market):focus-visible {
  outline: 2px solid #002e5d;
  outline-offset: 3px;
}

.home-page :is(.dpboss-refresh-pill-btn, .btn-refresh-market):disabled {
  cursor: wait;
  opacity: 0.85;
}

@media (hover: hover) {
  .home-page .dpboss-refresh-pill-btn:hover:not(:disabled) {
    background: #004085 !important;
  }
}

.home-page > footer {
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

.home-page footer nav {
  gap: 3px 6px !important;
}

.home-page footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 3px 4px;
}

@media (min-width: 600px) {
  .home-page #marketsContainer {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 600px) {
  .home-page :is(.explainer-terms-grid, .faq-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .home-page .explainer-terms-grid .result-explainer-item:nth-child(5) {
    grid-column: auto;
  }
}

@media (max-width: 359px) {
  .home-page .result-status-explanation {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 279px) {
  .home-page .dpboss-lucky-box {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-page .lucky-divider {
    width: 100%;
    height: 1px;
  }

  .home-page .home-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .final-ank-vertical-slider,
  .home-page .live-dot,
  .home-page .market-status-pill::before,
  .home-page .timing-status-badge::before {
    animation: none !important;
  }
}