/* Concept D — upload shelf and media rows. Web Navy/Teal tokens from app.css. */
.vr-reference{margin:18px 0;background:var(--panel,#1b1d2a);border:1px solid var(--line,#303245);border-radius:18px;padding:20px;color:var(--ink,#eef0f6);font:14px/1.5 Outfit,sans-serif;min-width:0;container-type:inline-size}
.vr-reference [hidden],.vr-reference[hidden]{display:none!important}
.vr-heading{display:flex;gap:12px;align-items:baseline;justify-content:space-between;margin-bottom:16px}.vr-heading h3{font:600 18px/1.3 Outfit,sans-serif;margin:0}.vr-local{color:var(--muted,#8e92b2);font-size:12px}
.vr-shelf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr);align-items:center;gap:10px;padding:12px;border-radius:12px;background:linear-gradient(125deg,rgba(238,240,246,.035),rgba(238,240,246,.01))}
.vr-shelf .mst-framepill{width:100%;margin:0;justify-content:space-between;min-height:48px;min-width:0;padding:8px 10px;font-size:14px;gap:6px;white-space:normal;background:var(--panel-2,#232537);border:1px solid var(--line,#303245);border-radius:12px;color:var(--ink,#eef0f6)}
.vr-shelf [data-start]{color:var(--teal,#35d0c5)}.vr-shelf .mst-plussq{width:28px;height:28px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:var(--bg,#14141e);font-size:22px;color:var(--ink,#eef0f6)}
.vr-start{position:relative}.vr-start-menu{position:absolute;z-index:8;left:0;top:calc(100% + 8px);min-width:220px;padding:6px;border:1px solid var(--line,#303245);border-radius:12px;background:var(--panel,#1b1d2a);box-shadow:0 16px 40px #0006}.vr-start-menu button{display:block;width:100%;border:0;background:transparent;color:var(--ink,#eef0f6);font:inherit;text-align:left;padding:12px;border-radius:8px;min-height:44px}
.vr-drop{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-width:0;min-height:104px;height:100%;padding:12px;border:1px dashed var(--muted,#8e92b2);border-radius:12px;background:transparent;color:var(--ink,#eef0f6);font:500 14px/1.5 Outfit,sans-serif;cursor:pointer;text-align:center}.vr-upload-icon{font-size:28px;line-height:1}.vr-desktop small{display:block;color:var(--muted,#8e92b2);font-size:12px;margin-top:3px}.vr-touch{display:none}
.vr-reference button{cursor:pointer;touch-action:manipulation}.vr-reference button:disabled{opacity:.5;cursor:default}.vr-reference :focus-visible,.vr-return :focus-visible{outline:2px solid var(--teal,#35d0c5);outline-offset:3px}.vr-reference button:not(:disabled):hover,.vr-start-menu button:hover{background-color:rgba(53,208,197,.07);border-color:var(--teal,#35d0c5)}.vr-drop.vr-over{border:2px solid var(--teal,#35d0c5);background:rgba(53,208,197,.08)}
.vr-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}.vr-row{display:flex;align-items:center;gap:14px;padding:12px;background:var(--panel-2,#232537);border-radius:12px;min-width:0}.vr-preview{width:108px;height:72px;object-fit:contain;border-radius:8px;background:var(--bg,#14141e);flex:none}.vr-info{flex:1;min-width:0}.vr-name{display:block;font-weight:600;overflow-wrap:anywhere}.vr-tag{display:block;font-size:12px;color:var(--muted,#8e92b2);margin:3px 0}.vr-role-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted,#8e92b2)}.vr-role{max-width:100%;font:500 12px Outfit,sans-serif;color:var(--teal,#35d0c5);background:var(--panel,#1b1d2a);border:1px solid rgba(53,208,197,.35);border-radius:8px;padding:8px;min-height:36px}.vr-remove{width:44px;height:44px;flex:none;align-self:center;background:transparent;border:1px solid var(--line,#303245);border-radius:10px;color:var(--ink,#eef0f6);font-size:22px}.vr-row-error{display:block;color:var(--ink,#eef0f6);font-size:12px}
.vr-status{font-size:12px;line-height:1.6;color:var(--ink,#eef0f6);margin:12px 0;overflow-wrap:anywhere;min-height:20px}.vr-footer{display:flex;justify-content:space-between;gap:16px;margin-top:20px}.vr-footer p,.vr-help{color:var(--muted,#8e92b2);font-size:12px;line-height:1.7;margin:0}.vr-capability{max-width:240px;text-align:right}.vr-help{margin-top:12px;max-width:80ch}.vr-reference code{color:var(--ink,#eef0f6);font-family:inherit;font-weight:600}.vr-return{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:14px;margin-bottom:16px;border:1px solid var(--teal,#35d0c5);border-radius:12px;font:14px/1.5 Outfit,sans-serif;color:var(--ink,#eef0f6);background:var(--panel,#1b1d2a)}
@container(max-width:380px){.vr-shelf{grid-template-columns:repeat(2,minmax(0,1fr))}.vr-drop{grid-column:1/-1}.vr-heading{display:block}.vr-local{display:block;margin-top:6px}.vr-drop{min-height:90px}.vr-footer{flex-direction:column;gap:10px}.vr-capability{text-align:left;max-width:none}}
@media(max-width:700px){.vr-reference{padding:16px}.vr-heading{display:block}.vr-local{display:block;margin-top:6px}.vr-shelf{grid-template-columns:repeat(2,minmax(0,1fr));padding:0;background:transparent;gap:14px}.vr-drop{grid-column:1/-1;min-height:100px}.vr-desktop{display:none}.vr-touch{display:inline}.vr-preview{width:72px;height:56px}.vr-row{gap:10px;padding:10px}.vr-remove{width:36px;height:44px}.vr-footer{flex-direction:column;gap:10px;margin-top:18px}.vr-capability{text-align:left;max-width:none}.vr-role-label{gap:3px;font-size:11px}.vr-shelf .mst-framepill{font-size:13px}.vr-name{font-size:13px}}
@media(pointer:coarse){.vr-desktop{display:none}.vr-touch{display:inline}.vr-role{min-height:44px}}

@container(max-width:320px){.vr-row{position:relative;gap:10px}.vr-preview{width:64px;height:56px;align-self:flex-start}.vr-info{min-width:0}.vr-name{padding-right:32px;min-height:30px}.vr-remove{position:absolute;top:8px;right:8px;width:32px;height:36px}.vr-role-label{display:block}.vr-role{width:100%;min-height:44px}.vr-heading h3{font-size:18px}.vr-shelf .mst-framepill{padding:8px;font-size:13px}}
/* Reference help: an info button beside the heading opens a non-modal popover under the heading. */
.vr-heading{position:relative}.vr-title{display:flex;align-items:center;gap:6px;min-width:0}
.vr-help-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:-10px -10px -10px -4px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--teal,#35d0c5);font:600 13px/1 Outfit,sans-serif}
.vr-help-toggle span{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:22px;height:22px;border:1.5px solid currentColor;border-radius:50%}.vr-help-toggle[aria-expanded="true"] span{background:var(--teal,#35d0c5);color:var(--bg,#14141e)}
.vr-help-menu{position:absolute;z-index:9;top:calc(100% + 8px);left:0;right:auto;box-sizing:border-box;width:min(420px,100%);max-height:min(70vh,520px);overflow:auto;margin:0;padding:16px;border:1px solid var(--line,#303245);border-radius:12px;background:var(--panel,#1b1d2a);color:var(--ink,#eef0f6);box-shadow:0 16px 40px #0006;font:14px/1.5 Outfit,sans-serif}
.vr-heading .vr-help-menu h3{margin:0 0 10px;font:600 15px/1.4 Outfit,sans-serif}.vr-help-menu .vr-footer{flex-direction:column;gap:8px;margin:0}.vr-help-menu .vr-footer p,.vr-help-menu .vr-help{font-size:13px;line-height:1.6}.vr-help-menu .vr-footer p:first-child{color:var(--ink,#eef0f6)}.vr-help-menu .vr-capability{text-align:left;max-width:none}.vr-help-menu .vr-help{margin-top:10px;max-width:none}
.vr-help-menu [data-help-close]{display:block;min-height:44px;margin:14px 0 0 auto;padding:0 18px;border:1px solid var(--line,#303245);border-radius:12px;background:transparent;color:var(--ink,#eef0f6);font:500 14px/1 Outfit,sans-serif}
@media(max-width:480px),(pointer:coarse){.vr-help-menu{right:0;width:auto}}
@container(max-width:380px){.vr-help-menu{right:0;width:auto}}

/* Reference tags (1023reftagT2): preview, name and tag of a row are one button that puts the tag into the prompt;
   each row says whether its tag is in the prompt. '@' or '<' in the prompt opens the same tags under the field. */
.vr-row.vr-taggable{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px}
.vr-taggable .vr-remove{grid-column:2;grid-row:1}
.vr-insert{display:flex;align-items:center;gap:14px;min-width:0;min-height:44px;margin:-4px;padding:4px;border:1px solid transparent;border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left}
.vr-insert .vr-info{display:block;flex:1;min-width:0}
.vr-reference .vr-insert:disabled{opacity:1}
.vr-row-actions{grid-column:1/-1;min-width:0;padding-left:122px}
.vr-row-actions:empty{display:none}
.vr-ref-state{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12px;line-height:1.5;color:var(--muted,#8e92b2)}
.vr-ref-state.vr-in{color:var(--teal,#35d0c5);font-weight:600}
.vr-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--teal,#35d0c5);color:var(--bg,#14141e);font-size:11px;line-height:1}
.vr-tag-picker{position:absolute;z-index:31;box-sizing:border-box;max-height:min(50vh,300px);overflow:auto;margin:0;padding:6px;border:1px solid var(--line,#303245);border-radius:12px;background:var(--panel,#1b1d2a);color:var(--ink,#eef0f6);box-shadow:0 16px 40px #0006;font:14px/1.4 Outfit,sans-serif;text-align:left;scroll-margin-bottom:96px}
.vr-pick{display:flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box;padding:6px 8px;border-radius:8px;cursor:pointer}
.vr-pick.vr-active{background:rgba(53,208,197,.1);box-shadow:inset 0 0 0 1px var(--teal,#35d0c5)}
.vr-pick-thumb{width:40px;height:32px;flex:none;object-fit:cover;border-radius:6px;background:var(--bg,#14141e)}
.vr-pick-text{display:flex;flex-direction:column;min-width:0}
.vr-pick-name{font-weight:600}
.vr-pick-file{font-size:12px;color:var(--muted,#8e92b2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.vr-row-actions{padding-left:86px}}
@container(max-width:320px){.vr-row-actions{padding-left:0}}

/* Orphaned tags (1023reforphT2b): a tag whose reference is gone gets a red chip directly under the prompt with Add and
   Remove, the prompt field a red edge while aria-invalid, and the status line turns red. Red = --red of css/app.css
   (#ff5d6c; tints .08/.35 as .pay-return.err); the text inside the textarea keeps its colour. */
.vr-orphans{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px;color:var(--ink,#eef0f6);font:13px/1.4 Outfit,sans-serif;text-align:left}
.vr-orphan{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0;padding:6px 6px 6px 12px;border:1px solid rgba(255,93,108,.35);border-radius:12px;background:rgba(255,93,108,.08)}
.vr-orphan-text{flex:1 1 140px;min-width:0;color:var(--red,#ff5d6c);font-weight:600;overflow-wrap:anywhere}
.vr-orphan-hint{order:3;flex-basis:100%;color:var(--muted,#8e92b2);font-size:12px}
.vr-orphans [hidden]{display:none!important}
.vr-orphan button{min-height:36px;margin:0;padding:0 12px;border:1px solid var(--line,#303245);border-radius:10px;background:var(--panel,#1b1d2a);color:var(--ink,#eef0f6);font:500 13px/1 Outfit,sans-serif;cursor:pointer;touch-action:manipulation}
.vr-orphan button:not(:disabled):hover{border-color:var(--teal,#35d0c5);background-color:rgba(53,208,197,.07)}
.vr-orphan button:disabled{opacity:.5;cursor:default}
.vr-orphan button:focus-visible{outline:2px solid var(--teal,#35d0c5);outline-offset:2px}
.vr-status.vr-status-error{color:var(--red,#ff5d6c)}
#stPrompt[aria-invalid="true"],#stPrompt[aria-invalid="true"]:focus{box-shadow:0 0 0 1.5px var(--red,#ff5d6c)}
@media(pointer:coarse){.vr-orphan button{min-height:44px}}