/**
 * page-collections.css — v208 Creator Collections: my-collections.php (manage list),
 * collection-edit.php (create/edit), collection-pin.php (add-to-collection sheet-page),
 * collection.php (public collection page). Reference files in playbook/:
 * collection-manage-preview.html, collection-create-preview.html,
 * pin-add-to-collection-preview.html, collection-page-preview.html.
 * Uses the shared .back-row/.page-sub/.h1/.field/.input/.textarea/.sticky-bottom/
 * .card/.btn/.icon-btn/.empty-moment tokens already defined in lite.css/brutal-lite.css
 * — only collection-specific layout lives here.
 */

/* ---- my-collections.php (manage list) ---- */
.top-bar{display:flex;align-items:center;justify-content:space-between;margin-top:-6px;}
.add-btn{width:40px;height:40px;border-radius:50%;background:var(--yellow);border:var(--bd);box-shadow:var(--sh-sm);
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:19px;flex:0 0 auto;text-decoration:none;}

.coll-list{display:flex;flex-direction:column;gap:12px;}
.coll-list .coll-row{display:flex;gap:12px;align-items:center;padding:12px;overflow:visible;margin:0;}
.coll-thumb{width:54px;height:54px;border-radius:12px;overflow:hidden;flex:0 0 auto;background:var(--card-2);
  display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:18px;}
.coll-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.coll-row-info{flex:1;min-width:0;}
.coll-row-title{font:800 14.5px/1.25 var(--font-display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.coll-row-count{font:600 12.5px/1.35 var(--font-ui);color:var(--muted);margin-top:3px;}
.coll-row-actions{display:flex;gap:2px;flex:0 0 auto;}
.coll-row-actions button, .coll-row-actions a{width:32px;height:32px;border-radius:9px;background:none;border:0;display:flex;align-items:center;
  justify-content:center;color:var(--muted-2);font-size:15px;cursor:pointer;text-decoration:none;}
.coll-row-actions button:disabled{opacity:.3;cursor:default;}
.coll-row-actions button.danger{color:var(--red);}

/* ---- v254: collection cover (inc/collections.php collection_cover_html) ----
   Same shapes as page-profile.css's profile-row card (keep the two in step):
   n1 full · n2 halves · n3 big + 2 · n4 grid · "+N" on the 4th tile · n0 dashed. */
.coll-cover{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;overflow:hidden;
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-card);}
.coll-cover img{width:100%;height:100%;min-height:0;object-fit:cover;display:block;}
.coll-cover.n1{grid-template-columns:1fr;grid-template-rows:1fr;}
.coll-cover.n2{grid-template-columns:1fr 1fr;grid-template-rows:1fr;}
.coll-cover.n3{grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;}
.coll-cover.n3 > img:first-child{grid-row:1 / 3;}
.coll-more{position:relative;min-height:0;}
.coll-more::after{content:attr(data-more);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(20,21,24,.55);color:#fff;font:800 22px/1 var(--font-display);letter-spacing:-.3px;}
.coll-cover.n0{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:2px dashed rgba(20,21,24,.22);background:#fafafb;color:var(--muted);}
.coll-cover.n0 i{font-size:26px;color:var(--ink);}
.coll-cover.n0 b{font:700 12.5px/1 var(--font-ui);}
/* list thumb on My collections */
.coll-cover--sm{width:54px;height:54px;flex:0 0 auto;gap:2px;border-radius:12px;}
.coll-cover--sm .coll-more::after{font-size:12px;letter-spacing:0;}
.coll-cover--sm.n0{border-width:1.5px;gap:0;}
.coll-cover--sm.n0 i{font-size:18px;}
/* page header on the collection page */
.coll-cover--hero{width:100%;height:200px;margin:18px 0 0;}
.coll-cover--hero .coll-more::after{font-size:28px;}

/* v254: brutal-lite-web.css's `body.lite-v31 .card{padding:0}` out-ranked the row padding
   below, so thumbs/badges sat on the card edge and text ran into the right border. */
body.lite-v31 .coll-list .coll-row.card{padding:12px 10px 12px 12px;}
body.lite-v31 .pin-list .pin-num-row.card{padding:10px 14px 10px 12px;}

/* ---- collection-edit.php (create/edit) ---- */
.edit-topbar{display:flex;align-items:center;justify-content:space-between;margin-top:-6px;margin-bottom:6px;}
.edit-topbar .link{font:700 15px/1 var(--font-ui);color:var(--blue);background:none;border:0;padding:4px 0;text-decoration:none;}
.edit-topbar .title{font:800 16px/1 var(--font-display);color:var(--ink);}

/* v251: Note box — app.css's dark-theme .textarea was showing through, with the
   browser's own textarea box drawn inside it. Same look as the Title .input. */
body.lite-v31 .field .textarea{display:block;width:100%;min-height:0;padding:13px 14px;border-radius:var(--r-ctl);background:#fff;
  border:1.5px solid var(--line);box-shadow:none;color:var(--ink);}
body.lite-v31 .field .textarea:focus-within{border:var(--bd);box-shadow:var(--sh-sm);}
body.lite-v31 .field .textarea textarea{display:block;width:100%;min-height:58px;border:0;outline:none;background:transparent;box-shadow:none;
  padding:0;margin:0;resize:vertical;font:500 15px/1.45 var(--font-ui);color:var(--ink);-webkit-appearance:none;appearance:none;}
body.lite-v31 .field .textarea textarea::placeholder{color:var(--muted-2);}
.sticky-bottom .btn small{font:700 12.5px/1 var(--font-ui);color:var(--ink-soft);}
.sticky-bottom .btn small[hidden]{display:none;}

.group{margin-top:24px;}
.group-label{font:800 11.5px/1 var(--font-ui);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0 2px 10px;}

.pin-pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pin-pick{position:relative;border-radius:14px;overflow:hidden;background:var(--card-2);cursor:pointer;display:block;}
.pin-pick img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.pin-pick-ph{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:24px;}
.pin-pick input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;}
.pin-pick .pp-check{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.92);
  border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;color:transparent;font-size:13px;}
.pin-pick.sel{outline:2px solid var(--ink);outline-offset:-2px;}
.pin-pick.sel .pp-check{background:var(--yellow);border:var(--bd);color:var(--ink);}
.pin-pick .pp-name{padding:9px 10px 11px;font:700 12.5px/1.3 var(--font-ui);color:var(--ink);background:#fff;}

.pin-order-list{display:flex;flex-direction:column;gap:2px;}
.pin-order-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);}
.pin-order-row:last-child{border-bottom:0;}
.pin-order-name{font:600 13.5px/1.3 var(--font-ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pin-order-btns{display:flex;gap:2px;flex:0 0 auto;}
.pin-order-btns .icon-btn{width:30px;height:30px;box-shadow:none;}

/* ---- collection-pin.php (add-to-collection "sheet", as its own page) ---- */
.coll-pick-list{display:flex;flex-direction:column;gap:2px;margin-top:18px;}
.coll-pick-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);cursor:pointer;position:relative;}
.coll-pick-row:last-child{border-bottom:0;}
.coll-pick-row input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;}
.coll-pick-thumb{width:40px;height:40px;border-radius:10px;overflow:hidden;flex:0 0 auto;background:var(--card-2);
  display:flex;align-items:center;justify-content:center;color:var(--muted-2);}
.coll-pick-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.coll-pick-info{flex:1;min-width:0;}
.coll-pick-title{font:700 14px/1.25 var(--font-ui);color:var(--ink);}
.coll-pick-count{font:600 12px/1 var(--font-ui);color:var(--muted);margin-top:2px;}
.coll-pick-check{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line);display:flex;align-items:center;
  justify-content:center;color:transparent;font-size:14px;flex:0 0 auto;}
.coll-pick-row input:checked ~ .coll-pick-check{background:var(--ink);border-color:var(--ink);color:var(--yellow);}

.coll-new-row{display:flex;align-items:center;gap:12px;padding:14px 4px 4px;margin-top:4px;color:var(--ink);text-decoration:none;}
.coll-new-ico{width:40px;height:40px;border-radius:10px;background:var(--card-2);display:flex;align-items:center;
  justify-content:center;font-size:17px;flex:0 0 auto;}
.coll-new-row span, .coll-new-row{font:700 14px/1 var(--font-ui);}

/* ---- collection.php (public collection page) ---- */
.coll-h1{font:800 26px/1.15 var(--font-display);letter-spacing:-.3px;color:var(--ink);margin:18px 0 8px;}
.coll-note{font:500 13.5px/1.55 var(--font-ui);color:var(--ink-soft);margin:0 0 16px;}

.creator-chip{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.creator-chip .cc-info{flex:1;min-width:0;}
.creator-chip .cc-name{display:flex;align-items:center;gap:4px;font:800 13.5px/1 var(--font-ui);color:var(--ink);}
.creator-chip .cc-name i{color:var(--blue);font-size:12px;}
.creator-chip .cc-sub{font:600 11.5px/1 var(--font-ui);color:var(--muted);margin-top:3px;}
.creator-chip .ghost-av{display:flex;align-items:center;justify-content:center;background:var(--card-2);color:var(--muted-2);}

.map-wrap{position:relative;width:100%;height:150px;border-radius:16px;overflow:hidden;background:var(--card-2);margin-bottom:24px;}
.map-wrap__fallback, .map-wrap__map{position:absolute;inset:0;width:100%;height:100%;}
.map-wrap__fallback svg{width:100%;height:100%;}
.map-wrap__map{opacity:0;transition:opacity .25s;}
.map-wrap__map.is-ready{opacity:1;}

.pin-list{display:flex;flex-direction:column;gap:12px;}
.pin-num-row{display:flex;gap:12px;align-items:center;padding:10px;}
.pin-num-row.is-inactive{opacity:.6;}
.pin-badge{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:800 12px/1 var(--font-ui);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.pin-thumb{position:relative;width:52px;height:68px;border-radius:10px;overflow:hidden;flex:0 0 auto;background:var(--card-2);display:block;}
.pin-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pin-info{flex:1;min-width:0;color:inherit;text-decoration:none;display:block;}
.pin-place{font:800 14px/1.25 var(--font-ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px;}
.pin-tagline{font:500 12px/1.3 var(--font-ui);color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}