.library-masthead { margin:12px 0 18px; }
.library-masthead h1 { max-width:900px; margin-bottom:4px; }
.library-heading-row {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
}
.library-heading-row > div { min-width:0; }
.library-heading-row .lede { margin-bottom:0; }

/* #122: a compact search entry point inside Library, not a second onboarding-style flow. It just
   opens the existing shared search dialog (#search-dialog), so it carries no state of its own and
   never disturbs the Saved/Tried view behind it. */
.library-search-open {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  flex:0 1 360px;
  min-width:260px;
  max-width:380px;
  margin:0;
  padding:10px 14px;
  text-align:left;
}
.library-search-open > span:first-child { font-size:14px; font-weight:800; }
.library-search-open-hint { font-weight:400; font-size:11px; line-height:1.3; opacity:0.72; }

/* #94: Saved / Tried tabs inside a single Library screen. Saved is the default view. */
.library-tabs {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0 0 12px;
  max-width:520px;
}
.library-tab {
  appearance:none;
  border:2px solid var(--navy);
  background:rgba(255,255,255,.9);
  color:var(--navy);
  border-radius:14px;
  min-height:50px;
  padding:10px 16px;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  box-shadow:3px 3px 0 rgb(var(--ink-rgb,17 26 75) / .12);
}
.library-tab[aria-selected="true"] {
  background:var(--navy);
  color:#fff;
  box-shadow:4px 4px 0 var(--pink);
}
.library-tab-count {
  display:inline-grid;
  min-width:28px;
  min-height:24px;
  place-items:center;
  margin-left:7px;
  padding:1px 7px;
  border-radius:999px;
  background:rgb(255 255 255 / .18);
  font-size:13px;
  font-weight:800;
}
.library-tab[aria-selected="false"] .library-tab-count { background:var(--pink-soft); }
.library-view-lede { margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.5; max-width:760px; }

.library-section { margin-top:26px; }
.library-section-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 14px; }
.library-section-head h2 { margin:0; font-size:clamp(24px,3vw,32px); }
.library-section-head p { margin:0; color:var(--text2,#3f4774); font-size:14px; }

.library-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}
.library-card {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  border:2px solid var(--navy);
  border-radius:14px;
  padding:22px 20px 18px;
  background:#fff;
  box-shadow:calc(7px * var(--hard)) calc(7px * var(--hard)) 0 var(--shadow-ink,rgb(var(--ink-rgb,17 26 75) / .12));
  filter:drop-shadow(0 3px 2px rgba(66,39,19,.08));
}
.library-card.is-favorite { background:var(--tint-warm,#fffdf0); box-shadow:calc(7px * var(--hard)) calc(7px * var(--hard)) 0 var(--pink); }
.library-card:nth-child(odd) { transform:rotate(calc(-.35deg * var(--tilt))); }
.library-card:nth-child(even) { transform:rotate(calc(.35deg * var(--tilt))); }
.library-tape {
  position:absolute;
  top:-9px;
  left:22%;
  width:64px;
  height:18px;
  background:rgba(255,241,178,.9);
  border:1px solid rgb(var(--ink-rgb,17 26 75) / .16);
  transform:rotate(calc(-5deg * var(--tilt)));
}
.library-card:nth-child(even) .library-tape { left:auto; right:20%; background:rgba(220,251,253,.92); transform:rotate(calc(6deg * var(--tilt))); }
.library-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.library-medium {
  padding:3px 9px;
  border:1px solid var(--navy);
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.library-source { color:var(--accent-text,var(--pink)); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.library-card h3 { margin:2px 0 0; font-size:clamp(22px,2.2vw,28px); }
.library-blurb { margin:0; color:var(--muted); font-size:14px; line-height:1.45; }
.library-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.library-actions-label { color:var(--navy); font-size:12px; font-weight:700; margin-right:2px; }
.library-action { min-height:38px; min-width:0; padding:6px 12px; font-size:13px; }
.library-action[aria-pressed="true"] { background:var(--navy); color:#fff; }
.library-empty { grid-column:1 / -1; }

.library-disliked {
  margin-top:28px;
  padding:14px 18px;
  border:1px solid rgb(var(--ink-rgb,17 26 75) / .18);
  border-radius:12px;
  background:rgba(255,255,255,.85);
  color:var(--text2,#3f4774);
}
.library-disliked summary { min-height:28px; display:flex; align-items:center; cursor:pointer; color:var(--navy); font-weight:700; }
.library-disliked p { margin:10px 0 0; font-size:13px; line-height:1.45; }
.library-disliked ul { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px; }
.library-disliked li { display:block; }
.library-disliked-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.library-disliked em { color:var(--muted); font-style:normal; font-size:12px; margin-left:6px; }
.library-restore { display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width:860px) {
  .library-card:nth-child(odd),.library-card:nth-child(even) { transform:none; }
  .library-grid { grid-template-columns:1fr; }
}


/* Calmer favorite-card hierarchy ------------------------------------------------------ */
.library-reaction-summary {
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.library-reaction-summary > span { color:var(--muted); font-size:12px; }
.library-reaction-summary strong { display:block; margin-top:2px; color:var(--navy); font-size:15px; }
.library-reaction-edit { position:relative; }
.library-reaction-edit summary {
  cursor:pointer;
  color:var(--note-ink,#5749bf);
  font-size:12px;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.library-reaction-options { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.library-secondary,.library-starter-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.library-secondary .button,.library-starter-actions .button { min-height:36px; min-width:0; padding:6px 11px; font-size:12px; box-shadow:none; }
.library-inline-remove {
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.library-card .tastebreak-panel.is-offer { margin-top:6px; }

.library-inline-remove { min-height:44px; padding:8px 4px; }

.library-reaction-edit summary { min-height:44px; display:inline-flex; align-items:center; }


/* Compact collection cards: scan first, expand for detail/actions. */
.library-card-compact {
  padding:0;
  gap:0;
  overflow:hidden;
  border-radius:12px;
  transform:none !important;
  min-width:0;
}
.library-card-compact .library-tape { display:none; }
/* #103 item 5: a closed card keeps its own height. Stretched to an open neighbour's row height it read
   as a large blank card with a lone "+". */
.library-card-compact:not([open]) { align-self:start; }
.library-compact-summary {
  list-style:none;
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 24px;
  gap:11px;
  align-items:center;
  padding:10px;
  cursor:pointer;
  min-height:92px;
}
.library-compact-summary::-webkit-details-marker { display:none; }
.library-compact-artwork {
  width:64px;
  height:84px;
  border-radius:7px;
  overflow:hidden;
  background:var(--tint-lilac,#ececf6);
  display:block;
}
.library-compact-artwork img { width:100%; height:100%; object-fit:cover; display:block; }
.library-compact-artwork.artwork-fallback {
  justify-content:flex-end;
  padding:8px;
}
.library-compact-artwork .artwork-fallback-title,
.library-compact-artwork .artwork-fallback-meta { display:none; }
.library-compact-artwork .artwork-fallback-type {
  font-size:8px;
  letter-spacing:.1em;
}
.library-compact-artwork.is-empty { border:1px solid var(--line); }
.library-compact-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.library-compact-copy strong {
  color:var(--navy);
  font-size:15px;
  line-height:1.15;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.library-compact-info {
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.library-compact-status {
  color:var(--accent-text,var(--pink));
  font-size:10px;
  font-weight:700;
}
.library-compact-open { color:var(--muted); font-size:22px; text-align:center; }
.library-card-compact[open] .library-compact-open { transform:rotate(45deg); }
.library-compact-detail {
  border-top:1px solid var(--line);
  padding:12px;
  background:rgba(255,255,255,.74);
}
.library-card-compact .library-blurb { font-size:12px; overflow-wrap:anywhere; }
.library-card-compact .bookmark-why { font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.library-card-compact .bookmark-actions,
.library-card-compact .library-reaction-summary { margin-top:10px; }

/* #103 item 1/2: per-media-type metadata (director/cast, creator/cast, developer/publisher/
   platforms), shown only for the fields that actually exist. */
.library-detail-meta {
  display:grid;
  gap:4px;
  margin:0 0 10px;
  font-size:12px;
  line-height:1.4;
}
.library-detail-meta > div { display:flex; gap:6px; flex-wrap:wrap; }
.library-detail-meta dt { margin:0; font-weight:700; color:var(--navy); flex-shrink:0; }
.library-detail-meta dd { margin:0; color:var(--muted); overflow-wrap:anywhere; min-width:0; }

/* #103 item 5: long titles ("The Storm Riders") and dense metadata must wrap inside the card rather
   than overflow it, in every skin including Bold Graphic (3px borders leave less inner width). */
.library-compact-copy strong { overflow-wrap:anywhere; }
.library-compact-info { overflow-wrap:anywhere; white-space:normal; }
.library-compact-summary { min-width:0; }
.library-compact-detail * { max-width:100%; }
@media (max-width:1120px) {
  .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .library-grid { grid-template-columns:1fr; }
}

.library-compact-resolution {
  color:var(--muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.library-filter-band {
  margin-top:0;
  margin-bottom:18px;
  padding-block:10px;
}
.library-filter-band .filter-band-label {
  font-size:11px;
  letter-spacing:.08em;
}
@media (max-width: 760px) {
  .library-heading-row { align-items:stretch; flex-direction:column; }
  .library-search-open { width:100%; max-width:none; min-width:0; }
  .library-tabs { max-width:none; }
}

.library-reaction-filters {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:0 0 18px;
}
.library-reaction-filter {
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:7px 11px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--navy);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.library-reaction-filter span {
  display:inline-grid;
  min-width:22px;
  min-height:20px;
  place-items:center;
  padding-inline:5px;
  border-radius:999px;
  background:var(--tint-lilac,#ececf6);
  font-size:10px;
}
.library-reaction-filter.is-active {
  border-color:var(--navy);
  background:var(--navy);
  color:#fff;
}
.library-reaction-filter.is-active span { background:rgb(255 255 255 / .18); }
@media (max-width:620px) {
  .library-reaction-filters { flex-wrap:nowrap; overflow-x:auto; padding-bottom:3px; scrollbar-width:none; }
  .library-reaction-filters::-webkit-scrollbar { display:none; }
  .library-reaction-filter { flex:0 0 auto; }
}

.library-favorite-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0;
}
.library-favorite-row > span {
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.library-saved-tried {
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--line);
}