/* The shared view (shared/view.html): a report section that a member shared
   with a person who has no account. It shares the document with the other
   views, so every rule holds only while it shows: html[data-view="shared"].
   :where() keeps each rule's own specificity, as on the page this view was. */
:where(html[data-view="shared"]) {
  & body { background: var(--ground); }

  & .shared-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 16px;
    padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line-soft);
    font: 14px/1.4 var(--body); color: var(--ink); }
  & .shared-brand { font: 600 17px/1 var(--display); letter-spacing: .04em; }
  & .shared-more { flex: 1; margin: 0; color: var(--text); }
  & .shared-more b { color: var(--ink); }
  & .shared-acts { display: flex; gap: 8px; margin-left: auto; }
  & .shared-acts button { white-space: nowrap; }
  & #report section.an, & #report [id] { scroll-margin-top: 72px; }

  /* The rest of the report: blurred shapes, and one line that says how to read it. */
  & #report .an-locked { position: relative; cursor: pointer; }
  & #report .locked-blur { filter: blur(5px); opacity: .75; user-select: none; pointer-events: none; }
  & #report .locked-shapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
  & #report .locked-card { display: grid; align-content: start; gap: 10px; height: 180px; padding: 16px;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; }
  & #report .locked-card i { display: block; width: 80%; height: 10px; border-radius: 5px; background: var(--surface-grey); }
  & #report .locked-card i:first-child { width: 45%; height: 12px; }
  & #report .locked-card i:last-child { width: 100%; height: 92px; }
  & #report .locked-say { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;
    padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--surface);
    font: 600 13px/1.4 var(--body); white-space: nowrap; }

  @media (max-width: 720px) {
    & .shared-bar { flex-wrap: wrap; row-gap: 6px; padding: 10px 16px; }
    & .shared-more { order: 3; flex-basis: 100%; font-size: 13px; }
    & .shared-more span { display: none; }
    & #report .locked-shapes { grid-template-columns: minmax(0, 1fr); }
    & #report .locked-card:nth-child(n + 3) { display: none; }
  }
}