/* Documents behind line notes on Review (js/doc-source.js; mockup states review-needs-doc, review-source). Stage tokens only. */

/* the bar under the player, in the art box (.rw-below) */
.dsrc-bar { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 14px; background: var(--dk-b-ffffffa96, rgba(255,255,255,.96));
  box-shadow: var(--s-shadow); color: var(--s-ink, var(--dk-ink, #1F1F21)); font: 400 14px/1.45 var(--v-font); }
.dsrc-bar-i { flex: none; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #5D6E9A)); display: inline-flex; }
.dsrc-bar p { flex: 1; min-width: 0; margin: 0; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.dsrc-bar p b { color: var(--s-ink, var(--dk-ink, #1F1F21)); font-weight: 500; }
.dsrc-bar .pill { flex: none; }

/* the needs-source note on its line, and the line around it */
:root .da-rv .rw-line.has-need { background: var(--s-peri-soft, rgba(135,153,195,.14)); border-radius: 12px; }
:root .da-rv .rw-nc.tnote--needs { background: var(--s-card, var(--dk-paper, #fff)); }
:root .da-rv .rw-nc.tnote--needs .st b { color: var(--s-ink, var(--dk-ink, #1F1F21)); }
:root .da-rv .rw-nc .rw-nacts { grid-column: 2; display: flex; gap: 12px; }
:root .da-rv .rw-nc .rw-nacts .textbtn { font-size: 12px; padding: 0; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #5D6E9A)); text-decoration: underline; text-underline-offset: 2px; }

/* the Source chip on a line whose note put a document on screen */
.rw-src { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px 50px; padding: 2px 8px; border: 0; border-radius: 999px;
  background: var(--s-peri-soft, rgba(135,153,195,.16)); color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #5D6E9A)); font: 500 11px/1.4 var(--v-font); cursor: pointer; }
.rw-src:hover { background: rgba(135,153,195,.26); }
.rw-src:focus-visible { outline: 2px solid var(--s-peri, #8799C3); outline-offset: 2px; }

/* the two dialogs */
.dsrc { color: var(--s-ink, var(--dk-ink, #1F1F21)); font: 400 14px/1.5 var(--v-font); }
.dsrc-why { margin: 0 0 14px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.dsrc-drop { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px;
  border: 1.5px dashed var(--s-line, var(--dk-l-1f1f21a16, rgba(31,31,33,.16))); background: var(--s-canvas, var(--dk-b-f6f5f2, #F6F5F2)); }
.dsrc-drop.is-over { border-color: var(--s-peri, #8799C3); background: var(--s-peri-soft, rgba(135,153,195,.12)); }
.dsrc-link { width: 100%; box-sizing: border-box; }
.dsrc-or { color: var(--s-ink-2, var(--dk-t-636366, #636366)); font-size: 12px; text-align: center; }
.dsrc-pick { width: 100%; justify-content: center; }
.dsrc-msg { margin: 10px 0 0; min-height: 1.4em; color: var(--s-ink-2, var(--dk-t-636366, #636366)); font-size: 12px; overflow-wrap: anywhere; }
.dsrc-kick { margin: -4px 0 4px; color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #5D6E9A)); font-size: 13px; }
.dsrc-where { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); font-size: 13px; }
.dsrc-where svg { color: var(--dk-tx-s-peri-deep, var(--s-peri-deep, #5D6E9A)); }
.dsrc-passage { padding: 14px 18px; border-radius: 14px; background: var(--s-canvas, var(--dk-b-f6f5f2, #F6F5F2)); box-shadow: inset 0 0 0 1px var(--s-line, rgba(31,31,33,.12));
  color: var(--s-ink-2, var(--dk-t-636366, #636366)); font-size: 14px; line-height: 1.6; }
.dsrc-passage mark { background: rgba(135,153,195,.32); color: var(--s-ink, var(--dk-ink, #1F1F21)); padding: 1px 2px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dsrc-match { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; color: var(--dk-tx-s-positive, var(--s-positive, #3E7B52)); font-size: 13px; }
.dsrc-match svg { flex: none; margin-top: 2px; }

@media (max-width: 599px) {
  .dsrc-bar { flex-wrap: wrap; padding: 12px 14px; }
  .dsrc-bar p { flex-basis: calc(100% - 40px); }
  .dsrc-bar .pill { width: 100%; justify-content: center; }
  .rw-src { margin-left: 44px; }
}