/* Document Version Comparator landing page (/tools/compare-document-versions).
   Two labelled input slots in the hero, compact limits line, small "what you get" card.
   Layers on storefront.css + product-entry.css; used by this page only. */

.tp-dvc-hero{align-items:start}
.tp-dvc-hero .store-lead{margin-bottom:18px}

/* Input card */
.tp-dvc-start{margin:0;padding:18px;border:1px solid #cfd8ed;border-radius:12px;background:#f7f9ff;box-shadow:0 8px 24px #17213c0f}
.tp-dvc-start-title{margin:0 0 12px;font-size:15px;line-height:1.3;letter-spacing:0;color:#17213c}
.tp-dvc-slots{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tp-dvc-slots li{margin:0;min-width:0}
.tp-dvc-slot{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:136px;height:100%;padding:14px;border:2px dashed #9fb2e6;border-radius:10px;background:#fff;color:#17213c;text-decoration:none;transition:border-color .15s,background-color .15s}
.tp-dvc-slot:hover{border-color:#284de8;background:#f2f5ff}
.tp-dvc-slot:focus-visible{outline:3px solid #1769ff;outline-offset:2px;border-color:#284de8}
.tp-dvc-slot-tag{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#e6ecff;color:#1f3cc4;font-weight:800;font-size:14px}
.tp-dvc-slot-text{display:grid;gap:2px;min-width:0}
.tp-dvc-slot-text strong{font-size:17px;line-height:1.25}
.tp-dvc-slot-text small{font-size:13px;color:#52607a}
.tp-dvc-slot-pick{margin-top:auto;display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border:1px solid #284de8;border-radius:999px;color:#1f3cc4;font-size:13px;font-weight:700}
.tp-dvc-go.button{display:flex;justify-content:center;width:100%;min-height:52px;background:#284de8;border-color:#284de8;box-shadow:0 4px 0 #1830a5;font-size:16px}
.tp-dvc-go.button:hover{background:#203fce}
.tp-dvc-go.button:focus-visible{outline:3px solid #1769ff;outline-offset:3px}
.tp-dvc-note{margin:12px 0 0;font-size:13px;line-height:1.5;color:#52607a}
.tp-dvc-limits{margin:10px 0 0;padding-top:10px;border-top:1px solid #dbe2f3;font-size:13px;line-height:1.55;color:#3c4760}
.tp-dvc-limits a{display:inline-block;padding:10px 2px;margin:-10px 0;color:#1f3cc4;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.tp-dvc-demo-link{margin:10px 0 0}
.tp-dvc-demo-link a{display:inline-flex;align-items:center;min-height:40px;color:#1f3cc4;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.tp-dvc-limits a:focus-visible,.tp-dvc-demo-link a:focus-visible{outline:2px solid #1769ff;outline-offset:2px;border-radius:4px}

/* What you get */
.tp-dvc-get{min-width:0;padding:20px;border:1px solid #e3e6ee;border-radius:12px;background:#fff}
.tp-dvc-get h2{margin:0 0 12px;font-size:18px;line-height:1.3;letter-spacing:-.01em;color:#17213c}
.tp-dvc-mini{margin:0 0 14px;padding:12px 14px;border-radius:8px;background:#f6f7fa;border:1px solid #e3e6ee;font-size:14px;line-height:1.5;color:#17213c}
.tp-dvc-mini p{margin:0}
.tp-dvc-mini p+p{margin-top:4px}
.tp-dvc-mini-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5b6479}
.tp-dvc-mini del{color:#a61b1b;background:#fde8e8;text-decoration:line-through;padding:0 3px;border-radius:3px}
.tp-dvc-mini ins{color:#0b5f36;background:#e3f5ea;text-decoration:none;padding:0 3px;border-radius:3px}
.tp-dvc-mini .tp-dvc-mini-move{color:#52607a;font-size:13px}
.tp-dvc-get-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tp-dvc-get-list li{position:relative;padding-left:22px;font-size:14px;line-height:1.45;color:#3c4760}
.tp-dvc-get-list li::before{content:"";position:absolute;left:4px;top:.45em;width:8px;height:8px;border-radius:2px;background:#284de8}
.tp-dvc-get-list strong{color:#17213c}
.tp-dvc-get-foot{margin:14px 0 0;padding-top:12px;border-top:1px solid #e3e6ee;font-size:13px;color:#52607a}

.tp-dvc-hero .store-file-details{grid-column:1/-1}

@media (max-width:420px){
  .tp-dvc-start{padding:14px}
  .tp-dvc-slots{grid-template-columns:1fr}
  .tp-dvc-slot{flex-direction:row;align-items:center;min-height:64px;gap:12px}
  .tp-dvc-slot-pick{margin:0 0 0 auto;flex:none}
  .tp-dvc-get{padding:16px}
}
@media (prefers-reduced-motion:reduce){.tp-dvc-slot{transition:none}}