/* About each figure (i), condensed detail (⋯) and search (rr-app-src/info.js) */

/* (i) and ⋯ together in the card's top-right corner, clear of the chamfer */
.rr .rr-corner { position: absolute; top: 6px; right: calc(var(--rr-chamfer, 14px) + 2px); display: flex; gap: 0; z-index: 2; }
.rr-ib { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--color-fg-muted); cursor: pointer;
  display: inline-grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.rr-ib svg { width: 16px; height: 16px; display: block; }
.rr-ib:hover, .rr-ib[aria-expanded="true"] { background: var(--color-bg); color: var(--color-fg); }
.rr-ib:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 1px; }
.rr .rr-card[data-rr-corner] > h3, .rr .rr-card[data-rr-corner] > .ad-head, .rr .rr-card[data-rr-corner] > .rr-head,
.rr .rr-card[data-rr-corner] > .hl-top, .rr .rr-card[data-rr-corner] > .rr-label { padding-right: 56px; }
.rr .rr-card[data-rr-corner="1"] > h3, .rr .rr-card[data-rr-corner="1"] > .ad-head, .rr .rr-card[data-rr-corner="1"] > .rr-head,
.rr .rr-card[data-rr-corner="1"] > .hl-top, .rr .rr-card[data-rr-corner="1"] > .rr-label { padding-right: 28px; }
.rr .hl-card[data-rr-corner] > .hl-top { flex-direction: column; align-items: flex-start; }

/* condensed: the headline figures stay; detail folds behind ⋯ unless the card is open or "Show detail" is on */
html:not(.rr-expand-all) .rr [data-rr-cond="1"]:not([data-rr-open="1"]) > .rr-more { display: none !important; }
html:not(.rr-expand-all) .rr .rr-tile[data-rr-long="1"]:not([data-rr-open="1"]) > .rr-sub { display: none !important; }
.rr .rr-note-short { display: none; }
html:not(.rr-expand-all) .rr [data-rr-cond="1"]:not([data-rr-open="1"]) > .rr-note-short { display: block; }
html:not(.rr-expand-all) .rr [data-rr-cond="1"]:not([data-rr-open="1"]) > p[data-rr-noted="1"] { display: none; }
html:not(.rr-expand-all) .rr .mk-sc[data-rr-cond="1"]:not([data-rr-open="1"]) > .mk-sc-why,
html:not(.rr-expand-all) .rr .mk-sc[data-rr-cond="1"]:not([data-rr-open="1"]) > .rr-note { display: none; }
.rr .mk-sc-head .rr-more-btn { margin-left: auto; width: 24px; height: 24px; }
.rr .mk-sc-head { gap: 6px; }

/* a card reached from search */
.rr [data-rr-flash="1"] { outline: 2px solid var(--rr-highlight, var(--color-fg)); outline-offset: 2px; transition: outline-color 0.3s; }

/* popover: on the page, not clipped by cards, inside the screen */
.rr-pop { position: fixed; z-index: 50; overflow: auto; overscroll-behavior: contain; width: max-content; max-width: min(360px, calc(100vw - 16px)); padding: 12px 14px; border-radius: 6px;
  background: var(--color-panel); color: var(--color-fg); border: 1px solid var(--color-border-line); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-caption); line-height: 1.45; }
.rr-pop-t { font-weight: var(--cds-font-weight-medium); font-size: var(--cds-font-size-body); margin-bottom: 4px; }
.rr-pop-h { margin: 8px 0 2px; font-size: 11px; font-weight: var(--cds-font-weight-medium); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-fg-muted); }
.rr-pop p { margin: 0 0 4px; }
.rr-pop-l { margin: 0; padding-left: 16px; }
.rr-pop-l li { margin: 0 0 3px; }
.rr-pop b { font-weight: var(--cds-font-weight-medium); }

/* search and Show detail, under the title */
.rr .rr-find { display: flex; align-items: center; gap: var(--cds-gap-sm); margin: 0 0 var(--cds-gap-md); flex-wrap: wrap; }
.rr .rr-find-box { position: relative; flex: 1 1 18rem; min-width: 0; display: flex; align-items: center; }
.rr .rr-find-box > svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--color-fg-muted); pointer-events: none; }
.rr .rr-find .rr-find-input { width: 100%; height: auto; line-height: 1.3; min-width: 0; font: inherit; font-size: var(--cds-font-size-body); padding: 9px 34px 9px 36px !important; border-radius: var(--cds-radius);
  border: 1px solid var(--color-border-line); background: var(--color-panel); color: var(--color-fg); -webkit-appearance: none; appearance: none; }
.rr .rr-find-input:focus { outline: 2px solid var(--color-fg); outline-offset: 0; }
.rr .rr-find-kbd { position: absolute; right: 8px; font: inherit; font-size: 11px; color: var(--color-fg-muted); border: 1px solid var(--color-border-line); border-radius: 4px; padding: 0 5px; pointer-events: none; }
.rr .rr-find-input:focus ~ .rr-find-kbd, .rr .rr-find-input:not(:placeholder-shown) ~ .rr-find-kbd { display: none; }
.rr .rr-find-list { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; max-height: min(60vh, 26rem); overflow: auto;
  background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: 6px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16); }
.rr .rr-find-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 8px; border-radius: 4px; cursor: pointer; }
.rr .rr-find-item.rr-find-on, .rr .rr-find-item:hover { background: var(--color-bg); }
.rr .rr-find-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rr .rr-find-meta { flex: none; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.rr .rr-find-none { padding: 8px; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
.rr .rr-detail-btn { flex: none; }
@media (max-width: 520px) {
  .rr .rr-find-kbd { display: none; }
  .rr .rr-find-item { flex-direction: column; gap: 0; }
  .rr .rr-find-meta { max-width: 100%; }
}