/* Draft: the Report on Compliance behind, dimmed; in front, a reporting-details paragraph is suggested sentence by
   sentence with its citations, a source passage opens, and Maria Reyes edits and accepts it. */

.vd .vd-board { overflow: hidden; opacity: .8; right: max(-6%, calc(-1 * var(--outer))); }
.vd .vd-ap { right: auto; width: max(100%, 1328px); }
:root[data-theme="light"] .vd .vd-board { opacity: .9; }

/* board: report page */
.vd-main { display: flex; flex-direction: column; min-width: 0; }
.vd-crumb { display: inline-flex; gap: 0; margin-left: 18px; color: var(--fg-4); }
.vd-crumb span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 9px 2px; border-right: 1.2px solid currentColor; border-top: 1.2px solid currentColor; transform: rotate(45deg); }
.vd-split { flex: 1; display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 0; }
.vd-outline { border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.vd-ol-h { padding: 0 8px 12px; font-weight: 500; }
.vd-ol-h small { display: block; color: var(--fg-3); font-size: 11.5px; font-weight: 400; }
.vd-ol-g { padding: 6px 8px; color: var(--fg-3); font-size: 11.5px; display: flex; }
.vd-ol-g span { margin-left: auto; font-family: "Geist Mono", monospace; }
.vd-ol { height: 28px; padding: 0 8px; border-radius: 6px; display: flex; align-items: center; gap: 8px; color: var(--fg-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.vd-ol .mono { font-size: 11px; color: var(--fg-3); min-width: 40px; }
.vd-ol.on { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-1); }
.vd-ol i { width: 8px; height: 8px; border-radius: 999px; flex: none; box-shadow: inset 0 0 0 1.25px var(--fg-4); transition: background .5s, box-shadow .5s; }
.vd-ol i.ok { background: var(--ok); box-shadow: none; }
.vd-ol i.am { box-shadow: inset 0 0 0 1.25px var(--amber); }
.vd-ol i.cu { background: var(--cu); box-shadow: none; }

.vd-doc { margin: 16px 24px; padding: 22px 32px; overflow: hidden; max-width: 820px; align-self: start; }
.vd-doc-h { display: flex; align-items: center; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.vd-doc-h h4 { margin: 0; font-size: 16px; font-weight: 560; letter-spacing: -0.018em; }
.vd-sec { padding: 18px 0 16px; border-bottom: 1px solid var(--line-2); }
.vd-sec-h { display: flex; align-items: center; gap: 10px; }
.vd-sec-h b { font-weight: 500; }
.vd-sec-h .ap-badge { margin-left: auto; }
.vd-tp { margin-top: 10px; color: var(--fg-3); font-size: 12px; }
.vd-tp .mono { margin-right: 8px; color: var(--fg-4); font-size: 11px; }
.vd-lbl { margin-top: 10px; color: var(--fg-3); font-size: 11.5px; }
.vd-para { margin-top: 4px; color: var(--fg-2); line-height: 1.85; }
.vd-skel { margin-top: 8px; display: flex; flex-direction: column; gap: 9px; }
.vd-skel i { height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--bg-3), var(--bg-4), var(--bg-3)); background-size: 200% 100%; animation: vd-shim 2.4s var(--ease-linear) infinite; }
.vd-skel i.s { width: 58%; }
.vd-skel.done i { animation: none; background: var(--bg-3); }
@keyframes vd-shim { 0% { background-position: 0 0; } 75%, 100% { background-position: -200% 0; } }

/* the panel */
.vd-panel { left: 40%; top: 72px; width: 600px; height: 512px; display: flex; flex-direction: column; font-size: 13px; line-height: 1.5; letter-spacing: -0.006em; color: var(--fg-1); text-align: left; user-select: none; transform-origin: 0 0; }
.vd-ph { height: 52px; flex: none; padding: 0 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); }
.vd-ph b { font-weight: 500; }
.vd-ph .ap-badge { margin-left: 4px; }
.vd-cursor { z-index: 8; }
.vd-cursor.flip .tag { left: auto; right: 4px; }
.vd-ph .ap-badge svg { transition: transform .6s; }
.vd-ph .ap-badge.spin > svg { animation: vd-spin 2.4s linear infinite; }
@keyframes vd-spin { to { transform: rotate(360deg); } }
.vd-ph-r { margin-left: auto; display: flex; gap: 12px; color: var(--fg-4); }
.vd-ph-r svg { width: 13px; height: 13px; }

.vd-pb { position: relative; flex: 1; min-height: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.vd-ask { color: var(--fg-3); font-size: 12.5px; }
.vd-by { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-3); }
.vd-by .r { margin-left: auto; }

/* drafted report text (.doc-page.is-sugg): a copper page with the thin copper underline while suggested; when the lead
   accepts, .accepted returns it to the normal surface, so the copper shows exactly what is still a suggestion */
.vd-narr { min-height: 196px; padding: 16px 18px; font-size: 13.5px; }
.vd-w { --u: color-mix(in srgb, var(--cu) 75%, transparent); opacity: 0; filter: blur(4px); background: linear-gradient(var(--u), var(--u)) no-repeat 0 100% / 100% 1px; transition: opacity var(--dur-enter) var(--ease-spring), filter var(--dur-enter) var(--ease-spring), background-size var(--dur-draw) var(--ease-spring); }
.vd-narr.settled .vd-w { background-size: 0% 1px; }
.vd-w.in { opacity: 1; filter: none; }

/* the citation chip: the product's id, version and page in one quiet chip */
.vd-cite { margin: 0 2px; height: 21px; gap: 6px; opacity: 0; transform: translateY(4px); filter: blur(4px); transition: opacity var(--dur-enter) var(--ease-spring), transform var(--dur-enter) var(--ease-spring), filter var(--dur-enter) var(--ease-spring), box-shadow var(--dur-hover), background var(--dur-hover), color var(--dur-hover); }
.vd-cite.in { opacity: 1; transform: none; filter: none; }
.vd-cite .v { padding-left: 6px; box-shadow: inset 1px 0 0 var(--line-3); }
.vd-cite .ck { width: 10px; height: 10px; color: var(--ok); }
.vd-cite.hot .ck { color: var(--cu); }

/* the tracked change */
.vd-edit del { text-decoration: none; background: linear-gradient(var(--red), var(--red)) no-repeat 0 55% / 0% 1.25px; transition: background-size .45s var(--ease-enter), color .45s; }
.vd-edit.struck del { background-size: 100% 1.25px; color: var(--fg-3); }
.vd-edit ins { text-decoration: none; position: relative; color: var(--fg-1); }
.vd-edit.struck ins { margin-left: 4px; }
.vd-t { background: linear-gradient(var(--fg-3), var(--fg-3)) no-repeat 0 100% / 100% 1px; }
.vd-edit ins { opacity: 0; filter: blur(4px); transition: opacity var(--dur-enter) var(--ease-spring), filter var(--dur-enter) var(--ease-spring); }
.vd-edit.struck ins { opacity: 1; filter: none; }
.vd-flag { position: absolute; left: 0; bottom: calc(100% + 1px); height: 16px; padding: 0 5px; border-radius: 4px 4px 4px 0; background: var(--bg-4); color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--line-3); font-size: 10.5px; line-height: 16px; white-space: nowrap; opacity: 0; transform: translateY(3px); transition: opacity .4s var(--ease-enter), transform .4s var(--ease-enter); }
.vd-edit.flag .vd-flag { opacity: 1; transform: none; }

.vd-change { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-2); opacity: 0; transform: translateY(10px); filter: blur(2px); transition: opacity .5s var(--ease-enter), transform .5s var(--ease-enter), filter .5s var(--ease-enter); }
.vd-change.in { opacity: 1; transform: none; filter: none; }
.vd-change b { font-weight: 500; color: var(--fg-1); }
.vd-change > span:nth-child(3) { color: var(--fg-3); }
.vd-change time { margin-left: auto; color: var(--fg-3); font-family: "Geist Mono", monospace; font-size: 11px; }

.vd-opts { margin-top: auto; display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 11.5px; color: var(--fg-3); white-space: nowrap; }
.vd-opts b { font-weight: 400; color: var(--fg-2); margin-left: 6px; }
.vd-opts .r { margin-left: auto; }

/* the citation popover */
.vd-pop { position: absolute; left: 0; top: 0; z-index: 10; width: 340px; padding: 12px; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3), 0 16px 40px #0000008c, 0 2px 6px #0006; opacity: 0; transform: translateY(6px) scale(.98); filter: blur(2px); transform-origin: 24px 0; pointer-events: none; transition: opacity .35s var(--ease-enter), transform .45s var(--ease-enter), filter .35s var(--ease-enter); }
:root[data-theme="light"] .vd-pop { background: #fff; box-shadow: inset 0 0 0 1px var(--line-3), 0 16px 40px #0000001f, 0 2px 6px #0000000f; }
.vd-pop.on { opacity: 1; transform: none; filter: none; }
.vd-pop-h { display: flex; align-items: center; gap: 8px; }
.vd-pop-h b { font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-pop-m { margin-top: 6px; display: flex; gap: 12px; color: var(--fg-3); font-size: 11.5px; }
.vd-pop .src-excerpt { margin-top: 10px; }
.vd-code, .ha-code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; line-height: 1.7; letter-spacing: 0; overflow: hidden; }
.vd-code p, .ha-code p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-code .n, .ha-code .n { display: inline-block; width: 22px; color: var(--fg-4); user-select: none; }
.vd-pop-f { margin-top: 10px; display: flex; align-items: center; font-size: 11.5px; color: var(--fg-3); }
.vd-pop-f .r { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2); }
.vd-pop-f svg { width: 11px; height: 11px; }

/* footer */
.vd-pf { flex: none; height: 56px; padding: 0 18px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line-2); }
.vd-who { color: var(--fg-2); display: inline-flex; align-items: center; gap: 8px; }
.vd-who svg { width: 14px; height: 14px; color: var(--ok); }
.vd-who time { color: var(--fg-3); font-size: 12px; }
.vd-pf .r { margin-left: auto; display: flex; gap: 8px; transition: opacity .4s var(--ease-enter); }
.vd-pf.wait .r { opacity: .4; }
.vd-pf.done .r { opacity: 0; }

@media (max-width: 760px) {
  .vd { height: 540px; }
  .vd-panel { left: 0; top: 150px; }
  .vd-cursor .tag { height: 20px; font-size: 12px; left: 12px; top: 12px; }
}
/* phone: the panel lays out at the column width (set by draft.js), so its own text is sized for reading */
@media (max-width: 640px) {
  .vd-pf .ap-btn, .vl-pf .ap-btn, .vl-ph .ap-badge, .vd-ph .ap-badge { font-size: 13px; }
  .vd-panel { top: 0; height: 600px; }
  .vd .vd-board { display: none; }
  .vd-panel .ap-key, .vd-pop .ap-ev { font-size: 12.5px; }
  .vd-pb { overflow: hidden; }
  .vd-ph { padding: 0 14px; }
  .vd-pb { padding: 14px; }
  .vd-by { font-size: 13px; flex-wrap: wrap; row-gap: 2px; }
  .vd-narr { padding: 12px 14px; flex: none; }
  .vd-cite { font-size: 13px; }
  .vd-flag, .vd-change time { font-size: 13px; }
  .vd-code { font-size: 12px; }
  .vd-change { font-size: 13px; }
  .vd-opts { display: none; }
  .vd-ask { font-size: 13px; }
  .vd-pop { width: 300px; }
  .vd-pop-h b, .vd-pop-m, .vd-pop-f { font-size: 13px; }
  .vd-pf { padding: 0 14px; }
  .vd-who time { font-size: 13px; }
}