/*
 * martin-bookmarks: the "My bookmarks" page (templates/page.php, assets/page.js). After martin-theme's
 * pages-members.css (pages v2: the .pg tokens, plum hero, gold eyebrow, dark cards). Class prefix mbk-.
 *   - Hero: "My account" under the theme's HOME button on PC (>=960px), after the lead below that.
 *   - Members with lists: a sticky rail of lists (>=900px), a switcher sheet below that.
 *   - Cards: a cover at 450:275, the title, the kind and date; two round tools on the cover (shown on
 *     hover or focus with a mouse, always on touch screens). Cards off screen are not laid out.
 *   - One popover (bottom sheet on phones), the select bar and the toast sit at the bottom.
 */

.mbk-page [hidden],.mbk-pop [hidden]{display:none!important}

/* ---- Hero ---- */
.pg .mbk-total{margin-left:4px;color:var(--pg-gold);font-size:.62em;vertical-align:.18em}
.pg a.mbk-acct,.pg a.mbk-acct:visited{display:inline-flex;align-items:center;gap:8px;height:40px;margin:16px 0 0;padding:0 16px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(0,0,0,.35);color:#f2e8ee;font:700 15px/1 var(--pg-font);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:border-color .15s ease,background-color .15s ease}
.pg a.mbk-acct:hover{border-color:var(--pg-pink2);background:rgba(0,0,0,.55);color:#fff;text-decoration:none}
.pg a.mbk-acct .pg-ico{width:17px;height:17px;color:var(--pg-gold)}
@media (min-width:960px){
	.mbk-hero{min-height:142px}
	/* Under HOME (54px tall at top 18px), right-aligned with it */
	.pg .mbk-hero>a.mbk-acct{position:absolute;top:84px;right:18px;margin:0}
}

/* ---- Frame: the rail beside the list (members with lists, PC) ---- */
.mbk-body{display:block}
.mbk-rail{display:none}
@media (min-width:900px){
	.has-lists .mbk-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:26px;align-items:start}
	.has-lists .mbk-rail{position:sticky;top:24px;display:block;padding:16px 12px 12px;border:1px solid var(--pg-line);border-radius:var(--pg-radius);background:var(--pg-card)}
}
.pg .mbk-rail-h{margin:0 6px 10px;color:var(--pg-gold);font:700 13px/1.25 var(--pg-font);letter-spacing:.18em;text-transform:uppercase}
.mbk-rail .mbk-lists{max-height:70vh;overflow:auto;overscroll-behavior:contain}
.mbk-lists{margin:0;padding:0;list-style:none}
.mbk-lists li{margin:0 0 2px}
.pg a.mbk-li,.pg a.mbk-li:visited{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:9px;border-left:3px solid transparent;color:var(--pg-text);font:400 17px/1.25 var(--pg-font);text-decoration:none;transition:background-color .15s ease}
.pg a.mbk-li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg a.mbk-li em{flex:none;color:var(--pg-dim);font:700 13px/1 var(--pg-font);font-style:normal}
.pg a.mbk-li:hover{background:var(--pg-card2);color:#fff;text-decoration:none}
.pg a.mbk-li[aria-current]{border-left-color:var(--pg-gold);background:var(--pg-card2);color:#fff;font-weight:700}
.pg a.mbk-li[aria-current] em{color:var(--pg-gold)}
.mbk-lists li:first-child{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--pg-line)}
.pg .mbk-li-new{width:100%;margin-top:8px;justify-content:flex-start}

/* ---- Toolbar ---- */
.mbk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin:0 0 16px}
.mbk-bar-l,.mbk-bar-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.mbk-bar-l{flex:1 1 auto}
.pg .mbk-vtitle{margin:0;min-width:0;font-size:26px;line-height:1.15;overflow-wrap:anywhere}
.pg .mbk-vtitle em{color:var(--pg-muted);font-style:normal;font-size:.8em}
.mbk-switch{display:none}
@media (max-width:899px){
	.has-lists .mbk-vtitle{display:none}
	.has-lists .mbk-switch{display:inline-flex}
}
.pg .mbk-switch{align-items:center;gap:8px;max-width:100%;margin:0;padding:8px 14px;border:1px solid var(--pg-line);border-radius:999px;background:var(--pg-card);color:#fff;font:400 21px/1.15 var(--pg-head);letter-spacing:.02em;text-transform:none;cursor:pointer;box-shadow:none}
.pg .mbk-switch>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg .mbk-switch em{color:var(--pg-muted);font:700 14px/1 var(--pg-font);font-style:normal}
.pg .mbk-switch .pg-ico{width:18px;height:18px;color:var(--pg-gold)}
.pg .mbk-switch:hover{border-color:var(--pg-pink2);background:var(--pg-card2)}
.mbk-bar-l.is-editing>:not(.mbk-rename){display:none!important}
/* "+ New list" lives in the rail (or the switcher sheet) once there are lists; Select only then */
.has-lists .mbk-new-btn{display:none!important}
.mbk-page:not(.has-lists) .mbk-select-btn{display:none!important}

/* Sort: two joined buttons */
.mbk-sort{display:inline-flex;padding:3px;border:1px solid var(--pg-line);border-radius:999px;background:var(--pg-card)}
.pg .mbk-sort-btn{display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 13px;border:0;border-radius:999px;background:none;color:var(--pg-muted);font:700 15px/1.2 var(--pg-font);letter-spacing:.02em;text-transform:none;cursor:pointer;box-shadow:none;transition:background-color .15s ease,color .15s ease}
.pg .mbk-sort-btn .pg-ico{width:16px;height:16px}
.pg .mbk-sort-btn:hover{color:#fff;background:transparent}
.pg .mbk-sort-btn[aria-pressed="true"]{background:var(--pg-pink);color:#fff}
.pg .mbk-sort-btn.is-za .mbk-i-sort{transform:scaleY(-1)}

/* ---- Buttons and fields ---- */
.pg .mbk-ghost{display:inline-flex;align-items:center;gap:7px;margin:0;padding:7px 14px;border:1px solid var(--pg-line);border-radius:999px;background:transparent;color:var(--pg-text);font:700 15px/1.2 var(--pg-font);letter-spacing:.02em;text-transform:none;cursor:pointer;box-shadow:none;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.pg .mbk-ghost .pg-ico{width:16px;height:16px;color:var(--pg-gold)}
.pg .mbk-ghost:hover{border-color:var(--pg-pink2);background:var(--pg-card2);color:#fff}
.pg .mbk-ghost[aria-pressed="true"]{border-color:var(--pg-gold);color:#fff}
.pg .mbk-ghost:disabled{opacity:.45;cursor:default;border-color:var(--pg-line);background:transparent}
.pg a.mbk-pill,.pg a.mbk-pill:visited,.pg .mbk-pill{display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 20px;border:0;border-radius:999px;background:var(--pg-pink);color:#fff;font:700 17px/1.2 var(--pg-font);letter-spacing:.02em;text-transform:none;text-decoration:none;cursor:pointer;box-shadow:0 6px 20px rgba(204,0,102,.28)}
.pg a.mbk-pill:hover,.pg .mbk-pill:hover{background:var(--pg-pink2);color:#fff;text-decoration:none}
.pg .mbk-pill--sm{padding:7px 16px;font-size:15px}
.pg .mbk-pill--danger{background:#b3261e;box-shadow:none}
.pg .mbk-pill--danger:hover{background:#d93a30}
.pg .mbk-pill:disabled{opacity:.6;cursor:default}
.pg .mbk-icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;margin:0;padding:0;border:1px solid var(--pg-line);border-radius:50%;background:var(--pg-card);color:var(--pg-text);cursor:pointer;box-shadow:none}
.pg .mbk-icon-btn:hover{border-color:var(--pg-pink2);background:var(--pg-card2);color:#fff}
.pg .mbk-icon-btn .pg-ico{width:18px;height:18px}
.pg .mbk-input,.pg .mbk-filter{width:100%;min-width:0;height:40px;margin:0;padding:0 14px;border:1px solid var(--pg-line);border-radius:10px;background:var(--pg-field);color:#fff;font:400 16px/1.2 var(--pg-font);box-shadow:none}
.pg .mbk-input:focus,.pg .mbk-filter:focus{border-color:var(--pg-gold);outline:none;background:var(--pg-field);color:#fff}
.pg .mbk-input::placeholder,.pg .mbk-filter::placeholder{color:var(--pg-dim);opacity:1}
.pg .mbk-filter{height:36px;margin:0 0 10px;font-size:15px}
.pg .mbk-rename{flex:1 1 260px;max-width:420px;height:44px;font:400 22px/1.15 var(--pg-head)}
.pg .mbk-err{margin:8px 0 0;color:#ffb3cf;font-size:15px;line-height:1.35}
.pg .mbk-err:empty{display:none}
.pg .mbk-hint{margin:0 0 12px;color:var(--pg-muted);font-size:16px}

/* ---- The strip under the toolbar: "+ New list", delete confirmation ---- */
.mbk-strip{margin:0 0 16px;padding:14px 16px;border:1px solid var(--pg-line);border-radius:12px;background:var(--pg-card)}
.mbk-new-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mbk-new-row .mbk-input{flex:1 1 220px;width:auto}
.mbk-strip .mbk-input{max-width:380px}
.mbk-new{margin:0}
.pg .mbk-confirm p{margin:0 0 10px;color:var(--pg-text)}
.pg .mbk-confirm b{color:#fff}

/* ---- Cards ---- */
.mbk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:22px 18px;margin:0;padding:0;list-style:none}
.mbk-card{position:relative;margin:0;content-visibility:auto;contain-intrinsic-size:auto 300px;transition:opacity .2s ease,transform .2s ease,display .2s allow-discrete}
.mbk-card.is-gone{display:none;opacity:0;transform:scale(.96)}
.pg a.mbk-card-a,.pg a.mbk-card-a:visited{display:flex;flex-direction:column;gap:9px;color:var(--pg-muted);text-decoration:none}
.mbk-pic{position:relative;display:block;overflow:hidden;aspect-ratio:450/275;border-radius:10px;background:#15151a;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.pg .mbk-pic img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.pg a.mbk-card-a:hover .mbk-pic img{transform:scale(1.03)}
.pg a.mbk-card-a:hover{text-decoration:none}
.pg a.mbk-card-a:focus-visible{outline:none}
.pg a.mbk-card-a:focus-visible .mbk-pic{outline:3px solid var(--pg-gold);outline-offset:3px}
.mbk-text{display:block;padding:0 2px;font-size:14px;line-height:1.3}
.mbk-text b{display:block;color:#fff;font-weight:700;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.pg a.mbk-card-a:hover .mbk-text b{color:var(--pg-link)}
.mbk-text small{display:block;margin-top:3px;color:var(--pg-dim);font-size:14px}

/* Tools on the cover */
.mbk-tools{position:absolute;top:8px;right:8px;z-index:2;display:flex;gap:6px;transition:opacity .15s ease}
.pg .mbk-tool{display:grid;place-items:center;width:38px;height:38px;margin:0;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(10,10,14,.72);color:#fff;cursor:pointer;box-shadow:none;transition:background-color .15s ease,border-color .15s ease}
.pg .mbk-tool:hover{border-color:var(--pg-pink2);background:rgba(10,10,14,.9)}
.pg .mbk-tool .pg-ico{width:18px;height:18px}
.mbk-tool--del .mbk-i-minus,.is-list .mbk-tool--del .mbk-i-close{display:none}
.is-list .mbk-tool--del .mbk-i-minus{display:block}
@media (hover:hover) and (pointer:fine){
	.mbk-tools{opacity:0}
	.mbk-card:hover .mbk-tools,.mbk-card:focus-within .mbk-tools{opacity:1}
}

/* Select mode: a checkbox on each cover, the tools away */
.mbk-cb{display:none}
.is-select .mbk-tools{display:none}
.pg.is-select .mbk-cb{position:absolute;top:10px;left:10px;z-index:2;display:block;width:24px;height:24px;margin:0;accent-color:var(--pg-pink);cursor:pointer}
.is-select .mbk-card.is-sel .mbk-pic{outline:3px solid var(--pg-gold);outline-offset:3px}
.is-select .mbk-card:not(.is-sel) .mbk-pic img{opacity:.75}
.is-select .mbk-grid{padding-bottom:70px}

/* ---- Empty view ---- */
.pg .mbk-note{margin:0}
.pg .mbk-empty{display:flex;align-items:center;gap:12px;margin:0;color:var(--pg-muted)}
.pg .mbk-empty>.pg-ico{width:26px;height:26px;color:var(--pg-gold)}
.pg .mbk-empty span .pg-ico{display:inline-block;width:18px;height:18px;vertical-align:-3px;color:var(--pg-gold)}
.pg .mbk-empty b{color:#fff}
.pg .mbk-cta{margin:14px 0 0}

/* ---- Select bar and toast (bottom of the window) ---- */
.mbk-selbar{position:fixed;left:50%;bottom:16px;z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;width:max-content;max-width:calc(100vw - 24px);padding:10px 14px;border:1px solid var(--pg-line);border-radius:16px;background:rgba(26,26,33,.97);box-shadow:0 14px 40px rgba(0,0,0,.55);transform:translateX(-50%)}
.mbk-selcount{margin-right:4px;color:#fff;font-weight:700;font-size:16px}
.mbk-toast{position:fixed;left:50%;bottom:20px;z-index:70;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 24px);padding:11px 16px;border:1px solid var(--pg-line);border-radius:12px;background:#2b2b35;color:#fff;font-size:16px;line-height:1.3;box-shadow:0 14px 40px rgba(0,0,0,.55);opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .2s ease,transform .2s ease}
.mbk-toast.is-on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.is-select .mbk-toast{bottom:90px}
.pg .mbk-undo{margin:0;padding:4px 10px;border:0;border-radius:8px;background:none;color:var(--pg-gold);font:700 15px/1.2 var(--pg-font);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:none}
.pg .mbk-undo:hover{background:rgba(226,178,106,.14);color:#f3cf94}

/* ---- Popover / bottom sheet (one element, moved to <body>) ---- */
.mbk-scrim{position:fixed;inset:0;z-index:998;background:rgba(5,5,8,.6)}
.pg.mbk-pop{position:absolute;z-index:999;width:320px;max-width:calc(100vw - 16px);max-height:min(70vh,520px);overflow:auto;overscroll-behavior:contain;padding:12px 14px 14px;border:1px solid var(--pg-line);border-radius:14px;background:#1d1d25;box-shadow:0 18px 50px rgba(0,0,0,.6);font-size:16px}
.pg.mbk-pop.is-sheet{position:fixed;top:auto!important;right:0;bottom:0;left:0!important;width:auto;max-width:none;max-height:82vh;padding:12px 16px calc(16px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0}
.mbk-pop-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.mbk-pop-h strong{color:var(--pg-gold);font:700 13px/1.25 var(--pg-font);letter-spacing:.18em;text-transform:uppercase}
.pg .mbk-pop-x{width:34px;height:34px}
.mbk-checks{max-height:300px;overflow:auto;margin:0 0 12px;padding:0;list-style:none}
.mbk-checks li{margin:0}
.pg .mbk-check{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:8px;color:var(--pg-text);cursor:pointer}
.pg .mbk-check:hover{background:var(--pg-card2);color:#fff}
.pg .mbk-check input{flex:none;width:19px;height:19px;margin:0;accent-color:var(--pg-pink)}
.pg .mbk-check span:not(.mbk-ok){flex:1;min-width:0;overflow-wrap:anywhere}
.mbk-ok{flex:none;width:18px;height:18px;color:var(--pg-ok);opacity:0}
.mbk-ok .pg-ico{width:18px;height:18px}
.mbk-ok.is-on{animation:mbk-tick 1.6s ease forwards}
@keyframes mbk-tick{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0}}
.mbk-menu{display:grid;gap:4px}
.pg .mbk-menu-item{display:block;width:100%;margin:0;padding:10px 12px;border:0;border-radius:8px;background:none;color:var(--pg-text);font:700 16px/1.2 var(--pg-font);text-align:left;text-transform:none;cursor:pointer;box-shadow:none}
.pg .mbk-menu-item:hover,.pg .mbk-menu-item:focus-visible{background:var(--pg-card2);color:#fff}
.pg .mbk-menu-item--danger{color:#ff9d9d}
.mbk-sheet-nav .mbk-lists{max-height:none}

/* ---- Phones ---- */
@media (max-width:599px){
	.mbk-grid{gap:20px}
	.pg .mbk-vtitle{font-size:23px}
	.pg .mbk-switch{font-size:19px}
	.mbk-bar{gap:10px}
	.pg .mbk-sort-btn{padding:6px 11px;font-size:14px}
	.pg .mbk-ghost{padding:7px 12px;font-size:14px}
	.mbk-selbar{left:8px;right:8px;width:auto;max-width:none;transform:none;bottom:10px}
	.mbk-toast{bottom:14px}
	.is-select .mbk-toast{bottom:120px}
}
@media (prefers-reduced-motion:reduce){
	.mbk-card,.pg .mbk-pic img,.mbk-toast,.mbk-tools{transition:none}
	.pg a.mbk-card-a:hover .mbk-pic img{transform:none}
	.mbk-ok.is-on{animation:none;opacity:1}
}