/* SCORM Package Validator landing page (/tools/validate-scorm-package).
   Short H1, one drop zone, one limit line, sample report card; details collapsed.
   Layers on storefront.css + tool-drop.css; used by this page only. */

.tp-scorm-hero{align-items:start}
.tp-scorm-hero h1{margin-bottom:14px}
.tp-scorm-lead{margin:0 0 4px;max-width:560px}

/* Drop zone */
.tp-scorm-drop{max-width:none;margin:20px 0 0;padding:26px 20px 22px}
.tp-scorm-drop-title{margin:0;font-size:20px;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:#101828}

/* Limit line + link row */
.tp-scorm-limits{display:flex;flex-wrap:wrap;gap:4px 18px;margin:14px 0 0;padding:10px 14px;border:1px solid #d7e0f0;border-radius:10px;background:#fff;font-size:14px;line-height:1.5;color:#344054}
.tp-scorm-limits b{color:#101828}
.tp-scorm-links{display:flex;flex-wrap:wrap;gap:4px 22px;margin:10px 0 0}
.tp-scorm-links a{display:inline-flex;align-items:center;min-height:40px;color:#1250b5;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.tp-scorm-links a:hover{color:#0b3a8a}
.tp-scorm-links a:focus-visible,.tp-scorm-details summary:focus-visible{outline:3px solid #1768e5;outline-offset:2px;border-radius:6px}

/* What you get card */
.tp-scorm-preview{display:grid;gap:14px;background:#fff;border-color:#d7e0f0;box-shadow:0 10px 30px rgba(16,24,40,.06)}
.tp-scorm-preview .store-example-label{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:800;letter-spacing:.06em;color:#475467}
.tp-scorm-preview h2{margin:0;font-size:20px;line-height:1.3;letter-spacing:-.02em;color:#101828}
.tp-scorm-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.tp-scorm-metrics div{padding:10px 12px;border:1px solid #e4e7ec;border-radius:10px;background:#f8fafc;min-width:0}
.tp-scorm-metrics dt{font-size:12px;line-height:1.3;color:#475467}
.tp-scorm-metrics dd{margin:2px 0 0;font-size:24px;font-weight:800;line-height:1.1;color:#101828}
.tp-scorm-findings{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tp-scorm-findings li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid #e4e7ec;border-radius:10px;min-width:0}
.tp-scorm-findings div{display:grid;gap:2px;min-width:0}
.tp-scorm-findings strong{font-size:15px;line-height:1.35;color:#101828}
.tp-scorm-findings small{font-size:13px;line-height:1.45;color:#475467;overflow-wrap:anywhere}
.tp-scorm-tag{flex:0 0 auto;min-width:48px;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:800;text-align:center}
.tp-scorm-tag-error{background:#fde8e7;color:#a0180f}
.tp-scorm-tag-note{background:#eef2f6;color:#344054}
.tp-scorm-files-title{margin:2px 0 0;font-size:13px;font-weight:800;color:#344054}
.tp-scorm-files{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tp-scorm-files li{padding:4px 10px;border:1px solid #cfd8ea;border-radius:999px;background:#f5f8ff;font-size:13px;color:#1d2939}
.tp-scorm-sample-note{margin:0;font-size:13px;line-height:1.5;color:#475467}

/* What it checks */
.tp-scorm-checks h2{margin:0 0 16px}
.tp-scorm-check-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tp-scorm-check-list li{display:grid;gap:6px;align-content:start;padding:16px;border:1px solid #e4e7ec;border-radius:12px;background:#fff;min-width:0}
.tp-scorm-check-list strong{font-size:16px;color:#101828}
.tp-scorm-check-list span{font-size:14px;line-height:1.5;color:#475467}
.tp-scorm-boundary{max-width:820px;margin:16px 0 0;font-size:15px;line-height:1.6;color:#344054}

/* Collapsed details */
.tp-scorm-details{border:1px solid #d7e0f0;border-radius:14px;background:#fff}
.tp-scorm-details summary{display:flex;align-items:center;min-height:56px;padding:12px 20px;font-weight:800;font-size:16px;color:#101828;cursor:pointer}
.tp-scorm-details[open] summary{border-bottom:1px solid #e4e7ec}
.tp-scorm-details-body{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:20px}
.tp-scorm-details-col{min-width:0}
.tp-scorm-details h2{margin:0 0 10px;font-size:18px;letter-spacing:-.01em}
.tp-scorm-details h2:not(:first-child){margin-top:20px}
.tp-scorm-details p{margin:0;font-size:15px;line-height:1.6;color:#344054}
.tp-scorm-spec{margin:0;display:grid;gap:8px}
.tp-scorm-spec div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;font-size:14px;line-height:1.5}
.tp-scorm-spec dt{font-weight:800;color:#101828}
.tp-scorm-spec dd{margin:0;color:#344054;overflow-wrap:anywhere}
.tp-scorm-spec code{font-size:13px;overflow-wrap:anywhere}
.tp-scorm-steps{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15px;line-height:1.55;color:#344054}
.tp-scorm-steps strong{color:#101828}

@media (max-width:960px){.tp-scorm-check-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .tp-scorm-hero h1{font-size:34px}
  .tp-scorm-drop{padding:20px 14px 18px}
  .tp-scorm-details-body{grid-template-columns:1fr;gap:8px;padding:16px}
  .tp-scorm-details summary{padding:12px 16px}
}
@media (max-width:480px){
  .tp-scorm-check-list{grid-template-columns:1fr}
  .tp-scorm-metrics dd{font-size:20px}
  .tp-scorm-metrics div{padding:8px}
  .tp-scorm-spec div{grid-template-columns:1fr;gap:0}
  .tp-scorm-limits{flex-direction:column}
}