/* Approved article refinements: preserve title, availability and body geometry. */
#o2c-announcements[data-page="detail"] .o2c-detail-hero .o2c-category {
  text-transform: none;
  letter-spacing: normal;
}

/* Match the site's external-link cue without changing the resource title or
   the existing accessible new-tab description. The CSS image is decorative. */
#o2c-announcements[data-page="detail"] .o2c-help-box a[target="_blank"]::after,
#o2c-announcements .o2c-reader-article .o2c-help-box a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-left: .35em;
  vertical-align: -.02em;
  background: currentColor;
  opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M4 4h8v8' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M4 4h8v8' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The existing 44px copy target stays available without requiring hero hover.
   Touch already has a visible tile; its established treatment stays intact. */
@media (hover: hover) and (pointer: fine) {
  #o2c-announcements[data-page="detail"] .o2c-sharing-article-hero .o2c-sharing-slot--article .o2c-share-tile {
    opacity: .62;
  }
  #o2c-announcements[data-page="detail"] .o2c-sharing-article-hero:is(:hover, :focus-within) .o2c-sharing-slot--article .o2c-share-tile,
  #o2c-announcements[data-page="detail"] .o2c-sharing-slot--article .o2c-share-button:is([aria-expanded="true"], [aria-busy="true"]) .o2c-share-tile {
    opacity: 1;
  }
}

/* A shared CSS cue owns resource arrows, including runtime-added app links. */
#o2c-announcements[data-page="detail"] .o2c-help-box [data-app-external-cue],
#o2c-announcements .o2c-reader-article .o2c-help-box [data-app-external-cue] { display: none; }
/* Approved feature-page reading and next-step refinements, September 2026. */
@media screen {
  #o2c-announcements[data-page="detail"] .o2c-detail:has(> .o2c-detail-hero.has-availability) .o2c-detail-body .o2c-copy,
  #o2c-announcements .o2c-reader-article:has(> .o2c-detail-hero.has-availability) .o2c-copy {
    max-width: 60ch;
  }
  #o2c-announcements .o2c-detail:has(> .o2c-detail-hero.has-availability) .o2c-help-box {
    display: grid;
    grid-template-columns: minmax(160px, .7fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
    padding: 26px 0;
    border: 0;
    border-top: 1px solid #dce6df;
    border-radius: 0;
    background: transparent;
  }
  #o2c-announcements .o2c-detail:has(> .o2c-detail-hero.has-availability) .o2c-help-box > .o2c-eyebrow { grid-column: 1; grid-row: 1; align-self: end; margin: 0 0 6px; color: #63766b; font-size: 10px; line-height: 1.5; }
  #o2c-announcements .o2c-detail:has(> .o2c-detail-hero.has-availability) .o2c-help-box > :is(h2,h3) { grid-column: 1; grid-row: 2; align-self: start; margin: 0; font-size: 23px; line-height: 1.2; }
  #o2c-announcements .o2c-detail:has(> .o2c-detail-hero.has-availability) .o2c-help-box .o2c-resource-list {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #o2c-announcements .o2c-detail:has(> .o2c-detail-hero.has-availability) .o2c-resource-list li { padding: 0; margin: 0; max-width: 100%; }
  #o2c-announcements .o2c-detail:has(> .o2c-detail-hero.has-availability) .o2c-resource-list a { font-size: 15px; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  #o2c-announcements .o2c-detail .o2c-resource-list a.o2c-resource-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 11px 18px;
    border: 1px solid #215347;
    border-radius: 7px;
    background: #215347;
    color: white;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
  }
  #o2c-announcements .o2c-detail .o2c-resource-list a.o2c-resource-primary:hover { background: #173f35; }
  #o2c-announcements .o2c-detail .o2c-resource-list a.o2c-resource-primary:focus-visible { outline: 3px solid #297d77; outline-offset: 4px; }
  #o2c-announcements .o2c-detail .o2c-resource-list a.o2c-resource-primary::after { flex: 0 0 .85em; margin-left: 0; }
}
/* Progressive enhancement: the original contents remains visible without JS. */
#o2c-announcements[data-page="detail"] .o2c-detail-contents > summary {
  display: none;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 10px 0;
  color: #315d4b;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
#o2c-announcements[data-page="detail"] .o2c-detail-contents > summary::after { content: '+'; font-size: 20px; font-weight: 400; }
#o2c-announcements[data-page="detail"] .o2c-detail-contents[open] > summary::after { content: '−'; }
#o2c-announcements[data-page="detail"] .o2c-detail-contents > summary::-webkit-details-marker { display: none; }
#o2c-announcements[data-page="detail"] .o2c-detail-contents > summary:focus-visible { outline: 2px solid #297d77; outline-offset: 4px; border-radius: 2px; }
@media screen and (max-width: 800px) {
  #o2c-announcements[data-page="detail"] .o2c-detail:has(.o2c-detail-contents) .o2c-detail-layout { padding-top: 12px; gap: 20px; }
  #o2c-announcements[data-page="detail"] .o2c-detail-contents { border-bottom: 1px solid #dce6df; }
  #o2c-announcements[data-page="detail"] .o2c-detail-contents > summary { display: flex; }
  #o2c-announcements[data-page="detail"] .o2c-detail-contents .o2c-toc > p { display: none; }
  #o2c-announcements[data-page="detail"] .o2c-detail-contents .o2c-toc { border-bottom: 0; padding: 0 0 12px; }
}
@media screen and (max-width: 640px) {
  #o2c-announcements .o2c-detail:has(> .o2c-detail-hero.has-availability) .o2c-help-box { grid-template-columns: minmax(0,1fr); gap: 0; }
  #o2c-announcements .o2c-detail:has(> .o2c-detail-hero.has-availability) .o2c-help-box .o2c-resource-list { grid-column: 1; grid-row: 3; margin-top: 20px; gap: 14px; }
}

/* Approved article figure footer. Keep original image links, assets and ratios. */
:is(#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page), #o2c-announcements .o2c-reader-article) .o2c-gallery[data-gallery] .o2c-gallery-item {
  position: relative;
  container: o2c-article-figure / inline-size;
}
:is(#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page), #o2c-announcements .o2c-reader-article) .o2c-gallery[data-gallery] .o2c-gallery-item > .o2c-gallery-link {
  position: static;
  overflow: visible;
}
/* The modern image keeps its existing border and dimensions; clip only its image corners. */
:is(#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page), #o2c-announcements .o2c-reader-article) .o2c-gallery[data-gallery]:not(.o2c-legacy-gallery) .o2c-gallery-preview {
  overflow: hidden;
  border-radius: inherit;
}
:is(#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page), #o2c-announcements .o2c-reader-article) .o2c-gallery[data-gallery] .o2c-gallery-item > figcaption {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 12px 0 0;
  padding: 0 148px 0 0;
  color: #3e6057;
  font-size: 14px;
  line-height: 21px;
  text-align: left;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
:is(#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page), #o2c-announcements .o2c-reader-article) .o2c-gallery[data-gallery] .o2c-gallery-item :is(.o2c-gallery-hint, .o2c-gallery-enlarge) {
  position: absolute;
  inset: auto 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #297d77;
  font: 600 13px/20px 'O2C Inter', Inter, Arial, sans-serif;
  white-space: nowrap;
  text-align: right;
}
:is(#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page), #o2c-announcements .o2c-reader-article) .o2c-gallery[data-gallery] .o2c-gallery-item :is(.o2c-gallery-hint, .o2c-gallery-enlarge)::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5M10.5 7v7M7 10.5h7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
:is(#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page), #o2c-announcements .o2c-reader-article) .o2c-gallery[data-gallery] .o2c-gallery-item .o2c-gallery-link:hover :is(.o2c-gallery-hint, .o2c-gallery-enlarge) {
  color: #194f48;
  text-decoration: underline;
  text-underline-offset: 3px;
}
:is(#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page), #o2c-announcements .o2c-reader-article) .o2c-gallery[data-gallery] .o2c-gallery-item .o2c-gallery-link:focus-visible :is(.o2c-gallery-hint, .o2c-gallery-enlarge) {
  outline: 2px solid #297d77;
  outline-offset: 2px;
}
/* A narrow figure needs the same readable stack even inside a desktop image grid. */
@container o2c-article-figure (max-width: 420px) {
  :is(#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page), #o2c-announcements .o2c-reader-article) .o2c-gallery[data-gallery] .o2c-gallery-item > figcaption {
    display: block;
    min-height: 0;
    padding: 0 0 48px;
  }
  :is(#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page), #o2c-announcements .o2c-reader-article) .o2c-gallery[data-gallery] .o2c-gallery-item :is(.o2c-gallery-hint, .o2c-gallery-enlarge) {
    inset: auto auto 0 0;
    justify-content: flex-start;
    text-align: left;
  }
}
@media (max-width: 640px) {
  :is(#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page), #o2c-announcements .o2c-reader-article) .o2c-gallery[data-gallery] .o2c-gallery-item > figcaption {
    display: block;
    min-height: 0;
    padding: 0 0 48px;
  }
  :is(#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page), #o2c-announcements .o2c-reader-article) .o2c-gallery[data-gallery] .o2c-gallery-item :is(.o2c-gallery-hint, .o2c-gallery-enlarge) {
    inset: auto auto 0 0;
    justify-content: flex-start;
    text-align: left;
  }
}
@media print {
  :is(#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page), #o2c-announcements .o2c-reader-article) .o2c-gallery[data-gallery] .o2c-gallery-item > figcaption {
    display: block;
    min-height: 0;
    padding: 0;
  }
  :is(#o2c-announcements[data-page="detail"] .o2c-detail:not(.o2c-launch-page), #o2c-announcements .o2c-reader-article) .o2c-gallery[data-gallery] .o2c-gallery-item :is(.o2c-gallery-hint, .o2c-gallery-enlarge) {
    display: none;
  }
}

/* Launch-page neighbors use the same navigation treatment as other articles. */
#o2c-announcements .o2c-launch-page .o2c-neighbors {
  gap: 18px;
}
#o2c-announcements .o2c-launch-page .o2c-neighbors a {
  position: relative;
  justify-content: center;
  gap: 7px;
  padding: 18px 46px 18px 20px;
  border: 1px solid #dce6df;
  border-radius: 7px;
  background: #fff;
}
#o2c-announcements .o2c-launch-page .o2c-neighbors a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 18px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: #297d77;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
#o2c-announcements .o2c-launch-page .o2c-neighbors a:is(:hover,:focus-visible) {
  background: #f0f6f2;
  border-color: #297d77;
}
#o2c-announcements .o2c-launch-page .o2c-neighbors span {
  font-size: 11px;
  color: #63766b;
}

/* Completed beta histories are optional context; active-beta histories stay open. */
#o2c-announcements .o2c-beta-history.is-collapsible {
  margin: 38px 0;
  padding: 0;
  border: 0;
  background: transparent;
}
#o2c-announcements .o2c-history-disclosure {
  border-top: 1px solid #d7e3dc;
  border-bottom: 1px solid #d7e3dc;
  background: #fbfcfa;
}
#o2c-announcements .o2c-history-disclosure > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 20px;
  gap: 20px;
  cursor: pointer;
  color: #193f37;
}
#o2c-announcements .o2c-history-disclosure > summary::-webkit-details-marker { display: none; }
#o2c-announcements .o2c-history-label { min-width: 0; }
#o2c-announcements .o2c-beta-history.is-collapsible .o2c-history-disclosure > summary .o2c-history-label > :is(h2,h3) {
  margin: 0;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  color: inherit;
}
#o2c-announcements .o2c-history-label > small {
  display: block;
  margin-top: 5px;
  color: #5b7167;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}
#o2c-announcements .o2c-history-disclosure > summary:focus-visible,
#o2c-announcements .o2c-history-body :is(h3,h4)[tabindex="-1"]:focus-visible {
  outline: 2px solid #297d77;
  outline-offset: 4px;
}
#o2c-announcements .o2c-history-cue {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
#o2c-announcements .o2c-history-cue::before,
#o2c-announcements .o2c-history-cue::after {
  content: '';
  position: absolute;
  background: currentColor;
}
#o2c-announcements .o2c-history-cue::before { top: 9px; left: 3px; width: 14px; height: 2px; }
#o2c-announcements .o2c-history-cue::after { top: 3px; left: 9px; width: 2px; height: 14px; }
#o2c-announcements .o2c-history-disclosure[open] > summary .o2c-history-cue::after { display: none; }
#o2c-announcements .o2c-history-body { padding: 14px 20px 22px; }
#o2c-announcements .o2c-beta-history.is-collapsible,
#o2c-announcements .o2c-history-body .o2c-beta-event { scroll-margin-top: 100px; }
@media (max-width: 600px) {
  #o2c-announcements .o2c-history-disclosure > summary { padding: 18px 14px; }
  #o2c-announcements .o2c-beta-history.is-collapsible .o2c-history-disclosure > summary .o2c-history-label > :is(h2,h3) { font-size: 19px; }
  #o2c-announcements .o2c-history-body { padding: 14px 14px 18px; }
}
@media print {
  #o2c-announcements .o2c-history-disclosure::details-content { content-visibility: visible; }
  #o2c-announcements .o2c-history-cue { display: none; }
}