/* 2Day.news Phase 2 / experimental V17.9.
   Source: UI06, UI10, UI19, UI20, QF05. Review on staging before approval.
   Brand assets, type scales, card read/unread fills, blue corner mask and
   all API/AI/save behavior remain exactly as approved in Phase 1. */

/* Proposed workspace and separation tokens; not yet final design approval. */
html:not(.theme-dark) body.headerless-concept {
  --d2-p2-workspace: #DFE8F2;
  --d2-p2-unread: #FFFFFF;
  --d2-p2-read: #E7EFF9;
  --d2-p2-edge: #AFC3D8;
  --d2-p2-divider: rgba(60, 96, 132, .23);
  --d2-p2-elevation: 0 4px 16px rgba(44, 74, 106, .14);
}
html.theme-dark body.headerless-concept {
  --d2-p2-workspace: #060E18;
  --d2-p2-unread: #111827;
  --d2-p2-read: #1C2B3E;
  --d2-p2-edge: #415B76;
  --d2-p2-divider: rgba(179, 202, 225, .20);
  --d2-p2-elevation: 0 6px 20px rgba(0, 0, 0, .38);
}

/* Use a single, visibly contrasting background behind both read and unread
   article surfaces. The sidebar and the gold sidebar signature are untouched. */
body.headerless-concept .stage-reading-region,
body.headerless-concept .stage-feed-scroll,
body.headerless-concept #desktopNewsContainer,
body.headerless-concept #newsTableWrap {
  background: var(--d2-p2-workspace) !important;
}
body.headerless-concept .news-table,
body.headerless-concept #newsBody {
  background: transparent !important;
}

/* Desktop: existing card structure, approved blue selected corners and article
   actions stay intact; only workspace/card division and spacing change. */
html[data-device-category="desktop"] body.headerless-concept #desktopNewsContainer .desktop-article-grid {
  gap: 22px !important;
  row-gap: 22px !important;
  background: transparent !important;
}
html[data-device-category="desktop"] body.headerless-concept #desktopNewsContainer .desktop-news-card-wrapper {
  box-sizing: border-box !important;
  border: 1px solid var(--d2-p2-edge) !important;
  box-shadow: var(--d2-p2-elevation) !important;
  background: var(--d2-p2-unread) !important;
  margin: 0 !important;
}
html[data-device-category="desktop"] body.headerless-concept #desktopNewsContainer .desktop-news-card-wrapper[data-read="read"] {
  background: var(--d2-p2-read) !important;
}
html[data-device-category="desktop"] body.headerless-concept #desktopNewsContainer .desktop-news-card-wrapper .story-card,
html[data-device-category="desktop"] body.headerless-concept #desktopNewsContainer .desktop-news-card-wrapper > .story-card-cell {
  background: transparent !important;
}

/* Mobile: an actual single parent shell now owns the article AND both rows of
   its action footer. There is no separate action-row box to glue to the card. */
@media (max-width: 900px) {
  html[data-device-category="mobile"] body.headerless-concept #newsBody .news-row[data-read] > .story-card-cell {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .d2-p2-card-shell {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--d2-p2-unread) !important;
    border: 1px solid var(--d2-p2-edge) !important;
    border-radius: 11px !important;
    box-shadow: var(--d2-p2-elevation) !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .news-row[data-read="read"] .d2-p2-card-shell {
    background: var(--d2-p2-read) !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .news-row[data-read] .d2-p2-card-shell > .story-card,
  html[data-device-category="mobile"] body.headerless-concept #newsBody .news-row.selected[data-read] .d2-p2-card-shell > .story-card {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .d2-p2-mobile-analysis-host {
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 12px 13px !important;
    min-width: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .d2-p2-mobile-analysis-host .analysis-panel {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .d2-p2-mobile-analysis-host .analysis-topline {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 0 0 !important;
    border-top: 1px solid var(--d2-p2-divider) !important;
    background: transparent !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .d2-p2-mobile-analysis-host .analysis-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 9px !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .d2-p2-mobile-analysis-host .analysis-ai-actions {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .d2-p2-mobile-analysis-host .analysis-original-group {
    display: flex !important;
    float: none !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .d2-p2-mobile-analysis-host .analysis-save-group {
    display: flex !important;
    float: none !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .d2-p2-mobile-analysis-host .ask-form {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Preserve exact existing blue curved top-left stroke from .story-card.
     Move ONLY its opposite marker to the new shared outer card's true bottom. */
  html[data-device-category="mobile"][data-d2-border="mirrored"]
  body.headerless-concept #newsBody .news-row.selected .d2-p2-card-shell::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    width: clamp(47px, 18%, 76px) !important;
    aspect-ratio: 1 / 1 !important;
    background: var(--d2-accent) !important;
    -webkit-mask: url("d2-corner-mask.svg") center / 100% 100% no-repeat !important;
    mask: url("d2-corner-mask.svg") center / 100% 100% no-repeat !important;
    transform: rotate(180deg) !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }
}
/* No gold gradient corner overrides, no custom logo assets or font changes. */

/* 2026-10-28 staging defect correction: Save is a plain two-state control.
   No success-green button paint; only the existing bookmark fills when saved.
   This applies to both desktop and the native mobile selected-article footer. */
body.headerless-concept #desktopNewsContainer .desktop-analysis-host .analysis-save-button.is-saved,
body.headerless-concept #newsBody .desktop-analysis-host .analysis-save-button.is-saved,
html.theme-dark body.headerless-concept #desktopNewsContainer .desktop-analysis-host .analysis-save-button.is-saved,
html.theme-dark body.headerless-concept #newsBody .desktop-analysis-host .analysis-save-button.is-saved {
  background: transparent !important;
  background-image: none !important;
  color: var(--d2-ink) !important;
  border-color: var(--d2-stroke) !important;
  box-shadow: none !important;
}
body.headerless-concept #desktopNewsContainer .desktop-analysis-host .analysis-save-button.is-saved .analysis-action-icon path,
body.headerless-concept #newsBody .desktop-analysis-host .analysis-save-button.is-saved .analysis-action-icon path {
  fill: currentColor !important;
  stroke: currentColor !important;
}
body.headerless-concept #desktopNewsContainer .save-article-button.is-saved,
body.headerless-concept #newsBody .save-article-button.is-saved {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Summary needs breathing room from the article's outer edge.
   Layout stays five actions; touch sizes, typography, 3+2 order unchanged. */
html[data-device-category="desktop"] body.headerless-concept #desktopNewsContainer .desktop-analysis-host .analysis-actions {
  box-sizing: border-box !important;
  padding-left: 8px !important;
}
@media (max-width: 900px) {
  html[data-device-category="mobile"] body.headerless-concept #newsBody .d2-p2-mobile-analysis-host .analysis-actions {
    box-sizing: border-box !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  /* Dark mode ONLY: remove the legacy full-height purple/read and
     blue/selected inset side rails. Retain the original short BLUE curved
     top-left and bottom-right SVG selected-corner markers, and preserve the
     user-accepted LIGHT-mode left-edge treatment unchanged. */
  html[data-device-category="mobile"].theme-dark body.headerless-concept #newsBody .news-row[data-read="read"],
  html[data-device-category="mobile"].theme-dark body.headerless-concept #newsBody .news-row.selected {
    box-shadow: none !important;
    border-left: 0 !important;
    background-image: none !important;
  }
}