@import url("./partner-fan.css");
/* The approved library layouts, scoped to the two shelves. */
.library-page { max-width:1180px; margin:auto; padding:2.3rem 1.2rem 3rem; }
.library-page [hidden], .library-dialog [hidden] { display:none !important; }
.library-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.8rem; flex-wrap:wrap; }
.library-head h1 { font:700 2rem/1.2 var(--display); color:var(--gold-bright); margin:.3rem 0 .45rem; }
.library-eyebrow { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0; }
.library-sub { margin:0; color:var(--muted); font-size:.9rem; }
.library-actions { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.library-button, .library-page .saved-actions>button, .library-page .saved-actions>a { display:inline-flex; justify-content:center; align-items:center; min-height:42px; padding:.55rem .85rem; border:1px solid var(--border); border-radius:3px; background:var(--surface-2); color:var(--ink); font:inherit; font-size:.84rem; text-decoration:none; cursor:pointer; }
.library-button.primary, .library-page .saved-actions>.open { background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#1b1408; border-color:var(--gold); font-weight:700; }
.library-button:hover { border-color:var(--gold); }
.library-button:disabled { opacity:.5; cursor:default; }
.library-page label, .library-dialog label { display:flex; flex-direction:column; gap:.4rem; color:var(--muted); font-size:.78rem; min-width:0; }
.library-page input, .library-page select, .library-dialog input, .library-dialog select { box-sizing:border-box; width:100%; min-width:0; min-height:42px; padding:.55rem .7rem; background:var(--surface-2); color:var(--ink); border:1px solid var(--border); border-radius:3px; font:inherit; font-size:.88rem; }
.library-page select, .library-dialog select { padding-right:2rem; }
.library-tools { display:grid; grid-template-columns:minmax(220px,2fr) repeat(3,minmax(120px,1fr)); gap:.8rem; }
.library-results { display:flex; justify-content:space-between; align-items:center; gap:.7rem; margin:1.1rem 0; color:var(--muted); font-size:.82rem; min-height:25px; }
.library-link { background:none; border:0; color:var(--gold-bright); padding:0; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.library-empty { padding:2rem 1rem; text-align:center; color:var(--muted); border:1px dashed var(--border); border-radius:4px; }
.library-empty h2 { color:var(--ink); font:600 1.1rem var(--display); }
.library-empty .library-actions { justify-content:center; }
.library-more { position:relative; margin-left:auto; }
.library-more summary { display:flex; align-items:center; justify-content:center; min-width:38px; min-height:40px; padding:0 .5rem; border:1px solid var(--border); border-radius:3px; cursor:pointer; list-style:none; font-size:1.3rem; background:var(--surface-2); color:var(--ink); }
.library-more summary::-webkit-details-marker { display:none; }
.library-more[open] { z-index:8; }
.library-menu { position:absolute; z-index:9; right:0; top:calc(100% + 5px); width:218px; max-width:calc(100vw - 55px); padding:6px; background:var(--menu-bg); border:1px solid var(--gold); border-radius:4px; box-shadow:0 9px 25px #0006; }
.library-menu button, .library-menu a { display:block; box-sizing:border-box; width:100%; min-height:38px; padding:.55rem .65rem; text-align:left; border:0; border-radius:2px; background:none; color:var(--ink); font:inherit; font-size:.85rem; cursor:pointer; text-decoration:none; }
.library-menu button:hover, .library-menu a:hover { background:var(--gold-wash); }
.library-menu button:disabled { color:var(--muted); cursor:default; opacity:.6; }
.library-menu .danger { color:var(--bad-ink); }
.library-dialog { box-sizing:border-box; width:min(620px,calc(100vw - 32px)); max-height:85vh; padding:1.5rem; border:1px solid var(--gold); border-radius:5px; background:var(--menu-bg); color:var(--ink); }
.library-dialog::backdrop { background:#0009; }
.library-dialog h2 { font:600 1.25rem var(--display); color:var(--gold-bright); margin:0 2rem 1rem 0; }
.library-dialog p { color:var(--muted); }
.library-dialog .library-actions { margin-top:1.2rem; }
.library-dialog .library-close { position:absolute; right:12px; top:12px; background:none; color:var(--ink); border:1px solid var(--border); border-radius:3px; width:32px; height:32px; cursor:pointer; }
.library-dialog .library-form { display:grid; gap:1rem; }
.library-dialog .library-error { color:var(--bad-ink); }
.library-page #pageNote { margin:0 0 1rem; }
.library-page .library-lower { display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--border-soft); margin-top:1.5rem; padding-top:1rem; color:var(--muted); font-size:.82rem; flex-wrap:wrap; }
.library-page .library-lower p { margin:0; }
.library-page .library-details { margin-top:1rem; color:var(--muted); font-size:.85rem; }
.library-page .library-details>summary { cursor:pointer; padding:.6rem 0; color:var(--gold-bright); }
/* Decks: three calm tiles; secondary actions stay in the options menu. */
.library-page .deck-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.library-page .saved { overflow:visible; min-width:0; }
.library-page .saved-art { aspect-ratio:1.7; border-radius:4px 4px 0 0; display:block; }
.library-page .saved-art>img { object-position:center 22%; }
.library-page .saved-art::after { pointer-events:none; }
.library-page .saved-badges { left:10px; right:auto; }
.library-page .saved-body { padding:1rem; gap:.5rem; }
.library-page a.saved-name { text-decoration:none; }
.library-page .saved-meta { line-height:1.5; }
.library-page .saved-cost { margin:.2rem 0; font-size:1.2rem; font-weight:700; color:var(--ink); }
.library-page .saved-cost small { font-size:.72rem; font-weight:400; color:var(--muted); }
.library-page .saved-phone { font-size:.76rem; color:var(--muted); margin:0 0 .5rem; }
.library-page .saved-phone.good { color:var(--good-ink); }
.library-page .saved-actions { flex-wrap:nowrap; gap:.45rem; }
.library-page .saved-actions>button, .library-page .saved-actions>a { font-size:.78rem; padding:.5rem .65rem; }
.library-page .saved-fan { background:radial-gradient(ellipse at center bottom,var(--gold-wash),var(--surface-deep)); }
.library-page .saved-fan>img { position:absolute; width:30%; height:auto; aspect-ratio:488/680; object-fit:cover; top:18%; left:35%; border-radius:5px; box-shadow:0 3px 14px #0008; transform:rotate(0deg); }
.library-page .saved-fan>img:nth-of-type(1) { transform:translateX(-65%) rotate(-14deg); top:25%; }
.library-page .saved-fan>img:nth-of-type(2) { z-index:1; }
.library-page .saved-fan>img:nth-of-type(3) { transform:translateX(65%) rotate(14deg); top:25%; }
.library-page .saved-fan>img:only-of-type { transform:none; top:18%; }
/* Collection: art above, name and one count/value line below. */
.collection-summary { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.35rem 1.5rem; margin-bottom:1.6rem; border:1px solid var(--border); border-radius:4px; background:var(--surface); }
.collection-summary .value-big { font:700 2.25rem/1.2 var(--display); color:var(--gold-bright); margin:.4rem 0; }
.collection-summary .value-sub, .collection-summary .value-fine { color:var(--muted); margin:.3rem 0; font-size:.85rem; }
.collection-summary label { max-width:260px; }
.collection-tools { display:grid; grid-template-columns:minmax(0,2fr) minmax(180px,1fr); gap:.85rem; margin-bottom:1rem; }
.collection-tabs { display:flex; gap:1.5rem; border-bottom:1px solid var(--border); }
.collection-tabs button { background:none; border:0; border-bottom:2px solid transparent; padding:.85rem 0; color:var(--muted); font:inherit; font-size:.86rem; cursor:pointer; }
.collection-tabs button[aria-pressed=true] { color:var(--gold-bright); border-bottom-color:var(--gold); }
.collection-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1rem; }
.collection-tile { position:relative; min-width:0; border:1px solid var(--border); border-radius:4px; background:var(--surface); }
.collection-tile:hover { border-color:var(--gold); }
.collection-tile>a { display:block; color:var(--ink); text-decoration:none; }
.collection-tile .tile-art { position:relative; aspect-ratio:1.62; background:var(--surface-deep); overflow:hidden; border-radius:3px 3px 0 0; }
.collection-tile .tile-art img { width:100%; height:100%; object-fit:cover; display:block; }
.collection-tile .kind { position:absolute; left:8px; top:8px; max-width:calc(100% - 65px); padding:.18rem .4rem; background:#171108ed; color:#f3ecdd; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; border-radius:2px; }
.collection-tile .sigil { display:grid; width:100%; height:100%; margin:0; border:0; background:none; box-shadow:none; transform:none; place-items:center; font-size:2rem; color:var(--gold); }
.library-page .library-menu button { border:0; border-radius:2px; background:none; padding:.55rem .65rem; font-size:.85rem; }
.collection-tile .tile-body { padding:.8rem .85rem .95rem; }
.collection-tile .tile-name { font:600 1rem var(--display); color:var(--gold-bright); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.collection-tile .tile-meta { color:var(--muted); font-size:.8rem; margin-top:.4rem; }
.collection-tile>.library-more { position:absolute; right:8px; top:8px; }
.collection-tile>.library-more summary { background:#171108ed; color:#f3ecdd; min-height:34px; min-width:34px; padding:0; border-color:#9c7c3c99; }
.collection-segment { display:flex; width:max-content; border:1px solid var(--border); border-radius:4px; overflow:hidden; margin-bottom:1rem; }
.collection-segment button { min-height:42px; border:0; border-right:1px solid var(--border); padding:.55rem 1rem; background:var(--surface); color:var(--muted); cursor:pointer; font:inherit; font-size:.85rem; }
.collection-segment button:last-child { border:0; }
.collection-segment button[aria-pressed=true] { background:var(--gold-wash); color:var(--gold-bright); }
.collection-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:1.2rem 1rem; }
.collection-card { min-width:0; text-decoration:none; color:var(--ink); }
.collection-card img { width:100%; aspect-ratio:488/680; object-fit:contain; background:var(--surface-2); border-radius:7px; display:block; }
.collection-card strong { display:block; font-size:.83rem; margin-top:.6rem; overflow-wrap:anywhere; }
.collection-card small { display:block; color:var(--muted); font-size:.75rem; margin-top:.25rem; overflow-wrap:anywhere; }
.collection-cards.compact { grid-template-columns:repeat(3,minmax(0,1fr)); }
.compact .collection-card { display:grid; grid-template-columns:60px minmax(0,1fr); gap:.8rem; border:1px solid var(--border); background:var(--surface); padding:.75rem; border-radius:4px; align-items:center; }
.compact .collection-card strong { margin-top:0; }
.collection-table-wrap { overflow-x:auto; }
.collection-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.collection-table th { color:var(--muted); text-align:left; font-weight:500; }
.collection-table th, .collection-table td { padding:.8rem .5rem; border-bottom:1px solid var(--border-soft); }
.collection-table small { display:block; margin-top:.25rem; color:var(--muted); }
.collection-table a { color:var(--gold-bright); }
.collection-scans { display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem; scroll-snap-type:x proximity; scrollbar-color:var(--gold) var(--surface-2); }
.collection-scans .collection-card { flex:0 0 145px; scroll-snap-align:start; }
.scan-tools { display:flex; align-items:end; justify-content:space-between; margin-bottom:1rem; gap:1rem; }
.scan-tools label { width:150px; }
.cover-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; margin:1rem 0; }
.cover-choice { border:1px solid var(--border); border-radius:4px; padding:0; background:var(--surface); color:var(--ink); cursor:pointer; overflow:hidden; text-align:left; }
.cover-choice img { width:100%; aspect-ratio:1.62; object-fit:cover; display:block; }
.cover-choice span { display:block; font-size:.8rem; padding:.6rem; }
.cover-choice[aria-pressed=true] { border:2px solid var(--gold); }
.library-page :focus-visible, .library-dialog :focus-visible { outline:2px solid var(--gold-bright); outline-offset:3px; }
@media(max-width:1000px) { .library-page .deck-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .collection-cards.compact { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .library-tools { grid-template-columns:repeat(2,minmax(0,1fr)); } .collection-summary { align-items:start; flex-direction:column; } .collection-summary label { max-width:none; width:100%; } .collection-table { font-size:.76rem; } }
@media(max-width:530px) { .library-page { padding:1.6rem 1rem 2rem; } .library-head h1 { font-size:1.7rem; } .library-head { align-items:start; } .library-page .deck-grid { grid-template-columns:minmax(0,1fr); } .library-page input,.library-page select,.library-dialog input { font-size:16px; } .collection-tools { grid-template-columns:1fr; } .collection-tabs { gap:1rem; } .collection-tabs button { font-size:.76rem; } .collection-tiles { grid-template-columns:1fr; } .collection-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem .75rem; } .collection-cards.compact { grid-template-columns:1fr; } .cover-choices { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(pointer:coarse) { .collection-tile>.library-more summary { min-width:44px; min-height:44px; } }