/* Project page: AI summary card + brochure player (28 Oct 2026). Colours come from the tokens in styles.css :root. */

/* ---------- summary ---------- */
.sum{margin-bottom:16px;border-top:3px solid var(--brand)}
.sum-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sum-head h2{font-size:15px;color:var(--brand)}
.sum-when{flex:1;font-size:12px;color:var(--muted-2);text-align:end}
.sum-refresh{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);color:var(--brand);font-size:16px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.sum-refresh:hover{background:var(--pale)}
.sum-refresh:disabled{opacity:.5;cursor:default}
.sum-refresh:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.sum.busy .sum-refresh{animation:sumspin 1s linear infinite}
@keyframes sumspin{to{transform:rotate(360deg)}}
.sum-list{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.75}
.sum-list li{position:relative;padding-inline-start:18px}
.sum-list li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.sum-src{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2);font-size:12px;color:var(--muted)}
.sum-wait{color:var(--muted);display:flex;align-items:center;gap:10px}
.sum-wait::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brand);animation:sumspin .8s linear infinite;flex:none}

/* ---------- brochure player ---------- */
.bp{margin-bottom:16px;padding:14px}
.bp-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.bp-head h2{font-size:15px;color:var(--brand);white-space:nowrap}
.bp-count{flex:1;min-width:0;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline-start:4px}
.bp-btn{min-width:34px;height:34px;padding:0 8px;border-radius:9px;background:var(--brand);color:#fff;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.bp-btn:hover{background:var(--brand-dark)}
.bp-btn:focus-visible,.bp-nav:focus-visible,.bp-th:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.bp-view{position:relative;width:100%;aspect-ratio:4/3;max-height:70vh;max-height:70dvh;border-radius:12px;overflow:hidden;
  background:var(--brand-dark);cursor:zoom-in}
.bp-view:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.bp-view:not(.loaded)::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.08) 50%,rgba(255,255,255,0) 70%) var(--brand-dark);
  background-size:200% 100%;animation:bpshine 1.4s linear infinite}
@keyframes bpshine{from{background-position:120% 0}to{background-position:-80% 0}}
.bp-view.broken::after{content:"Picture unavailable · الصورة مش متاحة";position:absolute;inset:auto 0 12px;text-align:center;color:var(--muted-2);font-size:12px}
.bp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .7s ease;pointer-events:none;user-select:none}
.bp-img.on{opacity:1}
.bp-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(7,42,64,.72);color:#fff;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;
  padding-bottom:3px;opacity:0;transition:opacity .2s,background .15s;cursor:pointer}
.bp-nav.prev{inset-inline-start:10px}
.bp-nav.next{inset-inline-end:10px}
.bp-nav:hover{background:var(--brand)}
.bp-view:hover .bp-nav,.bp-view:focus-within .bp-nav{opacity:1}
.bp.paused .bp-view::after{content:"❚❚ paused";position:absolute;top:10px;inset-inline-start:10px;padding:2px 9px;border-radius:999px;
  background:rgba(7,42,64,.78);color:#fff;font-size:11px}
.bp-strip{position:relative;display:flex;align-items:center;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
  padding:10px 2px 4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.bp-th{position:relative;flex:none;width:96px;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--line-2);border:2px solid transparent;opacity:.7;transition:opacity .2s,border-color .2s,transform .2s}
.bp-th img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .2s}
.bp-th.loaded img{opacity:1}
.bp-th span{position:absolute;bottom:3px;inset-inline-start:3px;padding:0 6px;border-radius:999px;background:rgba(7,42,64,.8);color:#fff;font-size:10px}
.bp-th:hover{opacity:1}
.bp-th.on{opacity:1;border-color:var(--brand);transform:translateY(-2px);box-shadow:0 4px 12px rgba(11,61,92,.25)}
.bp-th.broken{background:var(--red-bg)}
.bp-doc{flex:none;max-width:130px;padding:3px 9px;border-radius:999px;background:var(--pale);color:var(--brand);font-size:11px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* touch screens have no hover: keep the arrows visible */
@media (hover:none){.bp-nav{opacity:.9}}
@media (max-width:640px){
  .sum{padding:14px}
  .sum-list{font-size:14px}
  .bp{padding:10px}
  .bp-head h2{font-size:14px}
  .bp-view{max-height:62vh;max-height:62dvh;border-radius:10px}
  .bp-nav{width:38px;height:38px;font-size:24px}
  .bp-th{width:72px}
  .sum-when{font-size:11px}
  /* the project page's wide tables (prices, files) scroll sideways instead of widening the page */
  #view .card table{display:block;max-width:100%;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){
  .bp-img,.bp-th,.bp-th img,.bp-nav{transition:none}
  .bp-view:not(.loaded)::before,.sum.busy .sum-refresh,.sum-wait::before{animation:none}
}