/* View as client (session 9; docs/view-as.md): a slate frame and an amber striped edge, so a view can never be mistaken
   for the real portal. Applies only under .view-as and to the va- classes, so the portal's own look is untouched. Every
   colour is a token with its light value here; the dark values are in theme.css with the rest of the dark palette. */
.view-as .masthead { background-image: linear-gradient(135deg, var(--va-frame, #3b4250) 0%, var(--va-frame-2, #5a6273) 100%); }
.view-as .masthead::before { height: 5px; background: repeating-linear-gradient(135deg, var(--va-line, #f0d58a) 0 10px, var(--va-frame, #3b4250) 10px 20px); }
.view-as nav button.active::after { background: var(--va-line, #f0d58a); }
.va-bar { background: var(--va-bg, #fff4d6); color: var(--va-ink, #5c4400); border-bottom: 1px solid var(--va-line, #f0d58a); padding: .5rem 1.4rem; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; font-size: .92rem; }
.va-bar select, .va-chip { font: inherit; font-size: .88rem; padding: .25rem .4rem; border: 1px solid var(--va-line, #f0d58a); border-radius: 6px; background: var(--va-field, #fffaf0); color: var(--va-ink, #5c4400); }
.va-exit { font: inherit; font-weight: 700; border: 1px solid var(--va-ink, #5c4400); color: var(--va-ink, #5c4400); background: transparent; border-radius: 8px; padding: .3rem .9rem; cursor: pointer; }
.va-exit:hover { background: var(--va-hover, rgba(92,68,0,.08)); }
.va-note { flex-basis: 100%; background: var(--va-note-bg, #fdf7ec); border: 1px solid var(--va-note-line, #f0e2c4); color: var(--va-note-ink, #6f5320); border-radius: 8px; padding: .5rem .8rem; }
.va-person { border-style: dashed; background: var(--va-person-bg, #f7f8fb); }
.va-person h3 { margin-top: 0; }
@media (max-width: 560px) { .va-bar { padding: .5rem 1rem; } }