/* Collections: plain cards in the same style as the app list. Linked after the main stylesheet. */

/* Overview: one card per collection, a heading row, then one row per task with its app count. */
.collection-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.collection-card{padding:14px 16px 8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.collection-card-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.collection-card-head h2{flex:1;margin:0;font-family:var(--font-display);font-size:var(--fs-xl);font-weight:600}
.collection-card-head h2 button{text-align:left}
.collection-card-head h2 button:hover{color:var(--accent-text)}
.collection-card-meta{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.collection-symbol{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:var(--r-sm);color:var(--accent-text);background:var(--accent-soft)}
.collection-symbol .icon{width:18px;height:18px}
.collection-card-tasks{display:flex;flex-direction:column}
.collection-card-task{display:flex;align-items:center;gap:10px;width:100%;padding:8px 4px;border-top:1px solid var(--line);text-align:left;color:var(--ink)}
.collection-card-task:hover{background:var(--surface-2)}
.collection-card-task>span:not(.collection-task-icon){flex:1;min-width:0;font-size:var(--fs-sm);font-weight:600;line-height:1.35}
.collection-card-task>small{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.collection-task-icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:var(--r-sm);color:var(--accent-text);background:var(--accent-soft)}
.collection-task-icon .icon{width:16px;height:16px}

/* One collection: its tasks, then the apps for the chosen task. */
.collection-task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 18px}
.collection-task-tile{display:flex;align-items:center;gap:10px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);text-align:left;transition:border-color .15s}
.collection-task-tile:hover{border-color:var(--accent)}
.collection-task-copy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.collection-task-copy strong{font-size:var(--fs-sm);line-height:1.3}
.collection-task-copy small{font-size:var(--fs-xs);color:var(--muted);line-height:1.4}
.task-app-count{font-size:var(--fs-xs);white-space:nowrap;color:var(--ink-2);padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2)}
.collection-task-active{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.collection-task-active>div{display:flex;align-items:center;gap:10px;min-width:0}
.collection-task-active strong{font-size:var(--fs-sm)}
.collection-task-active small{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.collection-task-active .button{font-size:var(--fs-xs);padding:7px 10px}
.collection-task-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-4px 0 14px;padding:0 2px;color:var(--muted);font-size:var(--fs-xs)}
.collection-task-links>span{font-weight:650;margin-right:2px}
.collection-task-link{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:var(--accent-text);background:var(--surface);text-decoration:none;font-weight:650}
.collection-task-link .icon{width:12px;height:12px}
.collection-detail-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.collection-app{padding:13px;border-radius:var(--r-md)}
.collection-app h2{font-size:15px}
.collection-app .product-preview{aspect-ratio:1.9}

@media(max-width:1100px){.collection-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:950px){.collection-detail-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){
 .collection-cards,.collection-task-grid,.collection-detail-list{grid-template-columns:1fr}
 .collection-task-active{align-items:flex-start}
 .collection-task-active>div{flex-wrap:wrap}
 .collection-task-active small{width:100%;margin-left:40px;margin-top:-7px}
 .collection-task-active .button{max-width:118px}
}