/* Avori Projects (P1-5). Grayscale tokens only; follows docs/DESIGN-FOUNDATION.md. */
:root { --projects-panel-w: min(560px, 45vw); }
/* Same page width as Library and Apps. */
[data-page="projects"] .content .inner { max-width:1320px; }

/* Monogram tile for list cards, rows, chat cards and Home pins. */
.hosted-project-tile { display:grid; place-items:center; width:56px; height:56px; border-radius:14px; border:1px solid var(--line-2); background:var(--panel); color:var(--ink); font-weight:650; font-size:18px; letter-spacing:.02em; }
.hosted-project-tile.small { flex:none; width:34px; height:34px; border-radius:9px; font-size:12px; }
.hosted-project-card .market-card-foot { display:flex; align-items:center; gap:8px; min-width:0; }
.hosted-project-meta { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-3); font-size:12px; }
.hosted-project-host { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hosted-project-row { align-items:center; gap:12px; }
.hosted-project-row .grow { min-width:0; }
.hosted-project-row .sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hosted-older { margin:18px 0 0; font-size:13px; }
.hosted-older a { color:var(--ink-2); }

/* Project page. */
.hosted-project-head { display:flex; flex-direction:column; gap:6px; margin:0 0 14px; }
.hosted-project-link { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.hosted-project-link > a { color:var(--ink); font-weight:550; overflow-wrap:anywhere; }
.hosted-edge-status { margin:0; }
.hosted-frame { position:relative; width:100%; aspect-ratio:16/10; border:1px solid var(--line-2); border-radius:14px; overflow:hidden; background:var(--panel-2); }
.hosted-frame iframe { display:block; width:100%; height:100%; border:0; background:#fff; }
.hosted-frame-blocked { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; padding:20px; text-align:center; color:var(--ink-2); }
.hosted-frame-blocked[hidden] { display:none; }
.hosted-frame-blocked p { margin:0; }
.hosted-section { margin:26px 0 0; }
.hosted-section h2 { margin:0 0 8px; font-size:15px; font-weight:600; }
.hosted-version-row,.hosted-request-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.hosted-version-row .grow,.hosted-request-row .grow { flex:1; min-width:0; }
.hosted-version-row p,.hosted-request-row p { margin:0; }
.hosted-version-seq { flex:none; min-width:34px; font-variant-numeric:tabular-nums; }
.hosted-version-line { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hosted-version-actions { display:flex; gap:6px; flex:none; }
.hosted-state[data-state="live"] { color:var(--ink); border-color:var(--line-3); }
.hosted-state[data-state="failed"] { color:var(--ink-2); border-style:dashed; }

/* Share dialog. */
.hosted-share .choice-list { display:grid; gap:8px; }
.hosted-share .choice-card.selected { border-color:var(--ink); background:var(--hover); }
.hosted-share h3 { margin:18px 0 8px; font-size:13px; font-weight:600; color:var(--ink-2); }
.hosted-person { display:flex; align-items:center; gap:8px; padding:6px 0; }
.hosted-person .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hosted-person select { min-width:0; max-width:160px; }
.hosted-add { margin-top:6px; padding-top:12px; border-top:1px solid var(--line); }
.hosted-add [data-add-user] { flex:1; max-width:none; }

/* Preview beside the chat: a right panel from 1100 px, a full-screen sheet below. */
.projects-panel { position:fixed; top:0; right:0; bottom:0; z-index:60; display:flex; flex-direction:column; width:var(--projects-panel-w); background:var(--bg); border-left:1px solid var(--line-2); box-shadow:var(--shadow-pop); }
.projects-panel-bar { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); }
.projects-panel-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.projects-panel-body { flex:1; min-height:0; }
.projects-panel .hosted-frame { height:100%; aspect-ratio:auto; border:0; border-radius:0; }
@media (min-width:1100px) { body.projects-preview-open .main { margin-right:var(--projects-panel-w); } }
@media (max-width:1099px) { .projects-panel { left:0; width:auto; border-left:0; } }

/* Project link cards in chat. */
.hosted-chat-card { display:flex; align-items:center; gap:10px; margin:8px 0 0; padding:10px 12px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel); max-width:560px; }
.hosted-chat-card .grow { flex:1; min-width:0; }
.hosted-chat-card p { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Pinned projects on Home. */
.hosted-home-pins { width:100%; margin:18px 0 0; text-align:left; }
.hosted-home-pins h2 { margin:0 0 10px; font-size:14px; font-weight:600; color:var(--ink-2); }
.hosted-home-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.hosted-home-card { display:flex; flex-direction:column; gap:4px; min-width:0; color:var(--ink); text-decoration:none; }
.hosted-home-card .sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.hosted-home-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:550; }
.hosted-home-thumb { position:relative; display:grid; place-items:center; aspect-ratio:16/10; overflow:hidden; border:1px solid var(--line-2); border-radius:12px; background:var(--panel-2); }
.hosted-home-thumb iframe { position:absolute; top:0; left:0; width:400%; height:400%; border:0; transform:scale(.25); transform-origin:0 0; pointer-events:none; background:#fff; }

/* Access request route. */
.hosted-request { max-width:520px; }
.hosted-request h2 { margin:0 0 8px; overflow-wrap:anywhere; }

@media (max-width:600px) {
  .hosted-frame { aspect-ratio:4/5; }
  .hosted-version-row { flex-wrap:wrap; }
  .hosted-version-actions { width:100%; padding-left:46px; }
  .hosted-chat-card { flex-wrap:wrap; }
  .hosted-chat-card .grow { flex-basis:calc(100% - 44px); }
}