/* 2Day Phase 1 / v17.8: approved visual corrections only.
   This layer follows V17.7; no brand, type-scale, AI or interaction redesign. */

/* UI06: agreed light-mode READ surface. Unread and dark surfaces remain intact. */
html:not(.theme-dark) body.headerless-concept #desktopNewsContainer .desktop-news-card-wrapper[data-read="read"],
html:not(.theme-dark) body.headerless-concept #desktopNewsContainer .desktop-news-card-wrapper[data-read="read"] > .story-card-cell,
html:not(.theme-dark) body.headerless-concept #desktopNewsContainer .desktop-news-card-wrapper[data-read="read"] .story-card,
html:not(.theme-dark) body.headerless-concept #newsBody .news-row[data-read="read"] > .story-card-cell,
html:not(.theme-dark) body.headerless-concept #newsBody .news-row[data-read="read"] .story-card {
  background: #E7EFF9 !important;
  background-image: none !important;
}

/* UI19: visual indicator only for UNREAD; keep read label in the accessibility
   tree and its occupied space so timestamps do not jump on state changes. */
body.headerless-concept #dashboard .news-row[data-read="read"] .read-indicator,
body.headerless-concept #desktopNewsContainer .desktop-news-card-wrapper[data-read="read"] .read-indicator,
body.headerless-concept #newsBody .news-row[data-read="read"] .read-indicator {
  opacity: 0 !important;
}

/* R21: existing 42px segmented control clips its larger-size preview + label.
   Adjust only its box geometry, never its approved font sizes. */
@media (max-width: 900px) {
  html[data-device-category="mobile"] body.headerless-concept #settingsPanel .text-size-control.v10-segmented {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    height: auto !important;
    min-height: 82px !important;
    padding: 5px !important;
    overflow: visible !important;
    gap: 3px !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #settingsPanel .text-size-control.v10-segmented .text-size-choice {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 70px !important;
    padding: 7px 3px !important;
    white-space: normal !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #settingsPanel .text-size-choice span {
    max-width: 100% !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }

  /* QF24: position current-default label on its own grid row when the editable
     source name needs full width; no clipping or change to save/delete logic. */
  html[data-device-category="mobile"] body.headerless-concept #d2SourceManagerPanel .custom-source-setting-name-line {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    min-width: 0 !important;
    column-gap: 7px !important;
    row-gap: 3px !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #d2SourceManagerPanel .settings-source-favicon-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #d2SourceManagerPanel .custom-source-name-input {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #d2SourceManagerPanel .desktop-default-badge {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  /* UI18/UI20: the existing float permits long headlines under the thumbnail.
     Two-column grid prevents that while leaving the description full-width. */
  html[data-device-category="mobile"] body.headerless-concept #newsBody .news-row .story-card {
    display: grid !important;
    grid-template-columns: minmax(0, 96px) minmax(0, 1fr) !important;
    grid-template-areas: "media title" "desc desc" !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: start !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .news-row .d2-mobile-media-rail {
    grid-area: media !important;
    float: none !important;
    width: 96px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .news-row .story-title-cell {
    grid-area: title !important;
    float: none !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .news-row .story-title-wrap {
    display: block !important;
    min-width: 0 !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .news-row .story-title-trigger {
    overflow-wrap: anywhere !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .news-row .story-desc {
    grid-area: desc !important;
    float: none !important;
    clear: none !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    min-width: 0 !important;
  }
}

/* Respect the previously approved 80px media rail and 9px gap on <=370px
   devices. The wider 96px dimension must not override that mobile breakpoint. */
@media (max-width: 370px) {
  html[data-device-category="mobile"] body.headerless-concept #newsBody .news-row .story-card {
    grid-template-columns: minmax(0, 80px) minmax(0, 1fr) !important;
    column-gap: 9px !important;
  }
  html[data-device-category="mobile"] body.headerless-concept #newsBody .news-row .d2-mobile-media-rail {
    width: 80px !important;
    max-width: 80px !important;
  }
}