@media (min-width: 900px) {
  .vpd-page { max-inline-size: 1480px; margin-inline: auto; }
  .vpd-work { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
  .vpd-rail { display: flex; flex-direction: column; gap: var(--sp-5); min-inline-size: 0; position: sticky; top: var(--sp-6); }
  .vpd-main { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
  .vpd-stage { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; }
  .vpd-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-4); }
  .vpd-tl { padding: 0; overflow: hidden; }
  .vpd-tl-head { padding: var(--sp-4) var(--sp-4) var(--sp-3); display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
  .vpd-tl-head h2 { margin: 0; font-size: var(--fs-m); font-weight: var(--fw-semi); }
  .vpd-tl-list { max-block-size: 520px; overflow-y: auto; padding: 0 var(--sp-2) var(--sp-3); }
  .vpd-tl-empty { padding: var(--sp-3); margin: 0; }
  .vpd-grp { padding: var(--sp-4) var(--sp-2) var(--sp-1); font-size: var(--fs-s); color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
  .vpd-grp b { color: var(--ink); font-weight: var(--fw-semi); }
  .vpd-row { inline-size: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; background: none; color: var(--ink);
             border: 0; border-radius: var(--r-s); padding: var(--sp-2); text-align: start; font-weight: var(--fw-reg); }
  .vpd-row:hover { background: var(--hover); filter: none; }
  .vpd-row.is-on { background: var(--accent-soft); }
  .vpd-th { inline-size: 64px; aspect-ratio: 4 / 3; border-radius: var(--r-s); overflow: hidden; background: var(--bg2); display: block; }
  .vpd-th img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .vpd-l1 { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
  .vpd-rl { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
  .vpd-l2 { overflow-wrap: anywhere; }
  .vpd-side-tag { font-weight: var(--fw-semi); color: var(--accent); min-inline-size: 34px; text-align: end; }
  .vpd-dmg { color: var(--crit); font-weight: var(--fw-semi); }
  .vpd-more { inline-size: calc(100% - var(--sp-4)); margin: var(--sp-3) var(--sp-2) 0; }

  .vpd-bar { display: flex; align-items: center; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; }
  .vpd-bar h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semi); }
  .vpd-bar .grow { flex: 1 1 auto; }
  .vpd-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-s); overflow: hidden; background: var(--card); }
  .vpd-seg button { border: 0; border-radius: 0; padding: var(--sp-2) var(--sp-5); font-size: var(--fs-s); color: var(--ink); background: none; }
  .vpd-seg button[aria-pressed="true"] { background: var(--accent-soft); font-weight: var(--fw-semi); }
  .vpd-seg button:hover { background: var(--hover); filter: none; }
  .vpd-seg button[aria-pressed="true"]:hover { background: var(--accent-soft); }

  .vpd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .vpd-pair.over { grid-template-columns: minmax(0, 820px); justify-content: center; }
  .vpd-frame { position: relative; aspect-ratio: 4 / 3; max-inline-size: 100%; background: var(--bg2); border-radius: var(--r-s); overflow: hidden;
               touch-action: none; user-select: none; -webkit-user-select: none; }
  .vpd-frame.zoomed { cursor: grab; }
  .vpd-frame.panning { cursor: grabbing; }
  .vpd-cv { position: absolute; inset: 0; transform-origin: 0 0; }
  .vpd-img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; max-inline-size: none; -webkit-user-drag: none; }
  .vpd-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; }
  .vpd-clip { position: absolute; inset: 0; }
  .vpd-tag { position: absolute; top: var(--sp-4); z-index: 2; padding: 3px var(--sp-4); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semi);
             background: var(--ink); background: color-mix(in srgb, var(--ink) 72%, transparent); color: var(--bg); pointer-events: none; }
  .vpd-tag.l { inset-inline-start: var(--sp-4); }
  .vpd-tag.r { inset-inline-end: var(--sp-4); }
  .vpd-eye { position: absolute; inset-block-end: var(--sp-3); inset-inline-end: var(--sp-3); z-index: 3; background: var(--card); color: var(--ink); border: 1px solid var(--line); }
  .vpd-ovbar { position: absolute; top: 0; bottom: 0; inline-size: 28px; margin-inline-start: -14px; cursor: ew-resize; z-index: 2; display: flex; justify-content: center; }
  .vpd-ovbar::before { content: ""; inline-size: 2px; background: var(--on-accent); box-shadow: var(--shadow); }
  .vpd-grip { position: absolute; top: 50%; inline-size: 28px; block-size: 28px; margin-block-start: -14px; border-radius: 50%; background: var(--on-accent); box-shadow: var(--shadow); }

  .vpd-caps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .vpd-cap { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
  .vpd-c1 { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; min-block-size: 32px; }
  .vpd-who { font-weight: var(--fw-semi); }
  .vpd-when { font-weight: var(--fw-med); }
  .vpd-doors { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: baseline; }
  .vpd-doors .link { padding: 0; font-size: var(--fs-s); font-weight: var(--fw-reg); line-height: var(--lh-text); color: var(--accent); text-decoration: underline; background: none; border: 0; }

  .vpd-between { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-5); align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-3); }
  .vpd-btw-txt { text-align: center; font-size: var(--fs-s); }
  .vpd-btw-txt b { font-weight: var(--fw-semi); }
  .vpd-acts { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
  .vpd-acts > .link { padding-inline: 0; }
  .vpd-cta { padding: var(--sp-4) var(--sp-7); font-weight: var(--fw-semi); }
  .vpd-dmgpanel { border: 1px solid var(--line); background: var(--card); border-radius: var(--r-l); padding: var(--sp-4); }
  .vpd-dmgpanel > button.link { align-self: flex-start; padding-inline-start: 0; }

  .vpd-rest { display: flex; flex-direction: column; gap: var(--sp-4); border-block-start: 1px solid var(--line); padding-block-start: var(--sp-5); }
  .vpd-rest:empty { display: none; }
  .vpd-rest-head { display: flex; gap: var(--sp-2) var(--sp-5); align-items: baseline; flex-wrap: wrap; inline-size: 100%; text-align: start; background: none; color: var(--ink);
                   border: 0; padding: var(--sp-2) 0; font-weight: var(--fw-reg); font-size: var(--fs-m); }
  .vpd-rest-head:hover { filter: none; background: var(--hover); }
  .vpd-rest-word { margin-inline-start: auto; color: var(--accent); font-size: var(--fs-s); font-weight: var(--fw-med); }
  .vpd-rest-lab { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
  .vpd-rest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--sp-2); }
  .vpd-rest-it { padding: 0; border: 0; background: var(--bg2); border-radius: var(--r-s); overflow: hidden; aspect-ratio: 4 / 3; }
  .vpd-rest-it img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .vpd-rest-it.on { outline: 3px solid var(--accent); outline-offset: 2px; }
}



.dk-block { display: flex; flex-direction: column; gap: var(--sp-2); }
.dk-title { margin: 0; font-weight: var(--fw-semi); }
.dk-row { min-block-size: 56px; }
.dk-row .pi-ico { color: var(--ok); font-weight: var(--fw-bold); font-family: inherit; }
.dk-row .pi-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.dk-row .pi-name-btn { text-align: start; }
.dk-more { align-self: flex-start; }
.rflag-dc-known { margin: 0; }


.rn-chat-mark { display: inline-flex; align-items: center; min-height: 44px; margin-block: -14px; color: var(--muted); text-decoration: none; }
.rn-chat-mark:hover { color: var(--accent); }
.conv-row.rn-msg-hit { background: var(--accent-soft); border-radius: var(--r-s); transition: background 0.4s; }


.todo-sheet-title { font-weight: 600; overflow-wrap: anywhere; margin: 0; }
.todo-line { justify-content: space-between; gap: var(--sp-3); }
.todo-form select, .todo-form input, .todo-form textarea { width: 100%; }
.todo-card .prep-h1 { white-space: normal; overflow-wrap: anywhere; }


.pms-photos-after { margin-block-start: var(--sp-4); }


.vs-ph-item { display: grid; gap: var(--sp-2); }
.vs-ph-item[draggable="true"] { cursor: grab; }
.vs-ph-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-inline-size: 0; }
.vs-move { flex: 1 1 100%; min-inline-size: 0; max-inline-size: 100%; }


.todo-late-n { display: block; }

.todo-f-due { display: grid; gap: var(--sp-1); }

.ph-acts > button.ghost { gap: var(--sp-2); }