/* Unified library view */

/* ─── Library root ──────────────────────────────── */
.library-view{
  flex:1;min-width:0;min-height:0;overflow:auto;
  background:var(--background);
  padding:var(--spacing-07) var(--spacing-09) var(--spacing-10);
  display:flex;flex-direction:column;gap:var(--spacing-07);
}
body.guest .library-view{padding-left:calc(var(--airplane-padding) * 2);padding-right:calc(var(--airplane-padding) * 2)}

/* ─── Page hero ────────────────────────────────── */
.lib-hero-title{margin:0;color:var(--text-primary)}

/* ─── Shared section header ─────────────────────── */
.lib-section-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--spacing-04);margin-bottom:var(--spacing-04)}
.lib-section-left{display:flex;align-items:baseline;gap:var(--spacing-04);min-width:0}
.lib-section-title{margin:0;color:var(--text-primary)}
.lib-doc-count{color:var(--text-helper);font-weight:var(--font-weight-medium);background:var(--layer-02);padding:var(--spacing-01) var(--spacing-03);border-radius:var(--radius-02)}

/* ─── Slot strip section ───────────────────────── */
.slot-section{padding-bottom:var(--spacing-07)}
.slot-section .cm-grid{padding-bottom:var(--spacing-02)}

/* Slot-section card overrides */
.slot-section .cm-card-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;-webkit-line-clamp:unset}

/* Card name row (name + action menu) */
.cm-card-name-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-03)}
.cm-card-name-row .cm-card-name{flex:1;min-width:0}

/* Card action menu */
.cm-card-menu-wrap{position:relative;flex-shrink:0;z-index:1}
.cm-card-menu-btn{width:24px;height:24px;background:transparent;border:none;display:grid;place-items:center;color:var(--icon-secondary);cursor:pointer;padding:0;border-radius:var(--radius-02)}
.cm-card-menu-btn:hover{background:var(--layer-hover-01);color:var(--icon-primary)}
.cm-card-menu{position:absolute;right:0;top:28px;min-width:180px;animation:menuIn 140ms ease-out;z-index:var(--z-dropdown)}

/* Card tags */
.cm-card-tags{display:flex;flex-wrap:nowrap;overflow:hidden;gap:var(--spacing-02)}

/* Slot: new document */
.slot-new{
  background:transparent;
  border:2px dashed var(--border-subtle-01);
  border-radius:var(--card-radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--spacing-03);
  padding:var(--spacing-06);
  min-height:200px;
  cursor:pointer;
  color:var(--text-secondary);
  transition:border-color var(--duration-fast-02) var(--ease-standard-productive),
             color var(--duration-fast-02) var(--ease-standard-productive);
}
.slot-new:hover{border-color:var(--interactive);color:var(--interactive);background:var(--color-bg-fill-transparent-hover)}
.slot-new-icon{width:40px;height:40px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center}
.slot-new-label{color:inherit}
.slot-new-sub{color:var(--text-helper)}
.slot-new:hover .slot-new-sub{color:inherit;opacity:0.75}
.slot-new--creating{pointer-events:none;opacity:0.7}
.slot-new-icon--spin{animation:slot-spin 1s linear infinite}
@keyframes slot-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ─── Loading skeleton card ─────────────────────── */
@keyframes cmSkelPulse{
  0%,100%{opacity:1}
  50%{opacity:0.55}
}
.cm-card-skeleton{cursor:default;pointer-events:none}
.cm-card-skeleton:hover{border-color:var(--color-border);box-shadow:none}
.cm-skel-cover,
.cm-skel-line{
  background:var(--layer-02);
  border-radius:var(--radius-02);
  animation:cmSkelPulse 1.4s ease-in-out infinite;
}
.cm-skel-cover{width:100%;height:100%}
.cm-skel-line{height:14px}
.cm-skel-line--title{width:70%;height:16px}
.cm-skel-line--meta{width:45%;height:12px}

/* ─── Community section ─────────────────────────── */
.lib-community-section{}

.lib-community-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-04);margin-bottom:var(--spacing-04)}
.cm-doc-count{color:var(--text-helper);margin-bottom:var(--spacing-03)}
.lib-community-section .cm-grid{margin-top:0}
.lib-community-section .docs-empty{margin-top:0}
.lib-toolbar-right{display:flex;align-items:center;gap:var(--spacing-04);flex-shrink:0}
.cm-starred-filter--on{color:var(--interactive);background:var(--layer-selected-01)}
.cm-sort-wrap{position:relative;display:flex;align-items:center;gap:var(--spacing-03)}
.cm-sort-menu{position:absolute;right:0;top:calc(100% + 4px);min-width:160px;animation:menuIn 140ms ease-out}
.cm-sort-menu .menu__item--active{background:var(--layer-selected-01);font-weight:500}


/* ─── Community grid ─────────────────────────────── */
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:var(--spacing-05)}
.cm-page-marker{grid-column:1/-1;height:0;overflow:hidden;margin:0;padding:0}

/* ─── Community card ─────────────────────────────── */
.cm-card{cursor:pointer;position:relative}
.cm-card:focus{outline:2px solid var(--focus);outline-offset:-2px}
.cm-card-cover{background:var(--background);position:relative}
.cm-card-status{
  position:absolute;top:var(--spacing-03);right:var(--spacing-03);
  display:inline-flex;align-items:center;gap:var(--spacing-01);
  height:var(--chip-height);padding:var(--chip-padding);
  font:var(--chip-font);letter-spacing:var(--chip-letter-spacing);
  border-radius:var(--chip-radius);text-transform:uppercase;
  z-index:1;
}
.cm-card-status--private{background:var(--layer-02);color:var(--text-secondary);border-left:2px solid var(--border-strong-01)}
.cm-card-cover .dc-cover{height:100%;width:auto;max-width:none}
.cm-card:hover .dc-star{opacity:1}
.cm-card-body{display:flex;flex-direction:column;gap:var(--spacing-03)}
.cm-card-body .chip{align-self:flex-start}
.cm-card-name{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-card-name-link{text-decoration:none;color:inherit;display:block;min-width:0;outline:none}
.cm-card-name-link::after{content:'';position:absolute;inset:0;z-index:0}
.cm-card-name-link:focus-visible::after{outline:2px solid var(--focus);outline-offset:-2px}
.cm-card-cover .dc-star{z-index:1}
.cm-card-author{display:flex;align-items:center;gap:var(--spacing-03);min-width:0}
.cm-card-aname{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-card-cfi{font:var(--font-weight-semibold) var(--font-size-275)/1 var(--font-family-sans);color:var(--interactive);letter-spacing:var(--font-letter-spacing-looser);text-transform:uppercase;padding:var(--spacing-01) var(--spacing-02);border:1px solid var(--interactive);flex-shrink:0}


/* Stats row */
.cm-card-stats{display:flex;align-items:center;gap:var(--spacing-02);color:var(--text-helper)}
.cm-card-stats svg{color:var(--icon-secondary)}
.cm-stat-sep{color:var(--text-helper);margin:0 var(--spacing-01)}
.cm-stat-cell{display:inline-flex;align-items:center;gap:var(--spacing-02)}
.cm-stat-group{margin-left:auto;display:flex;align-items:center;gap:var(--spacing-02)}

/* Card actions */
.cm-card-actions{display:flex;gap:var(--spacing-03);padding-top:var(--spacing-03);border-top:1px solid var(--border-subtle-01);margin-top:var(--spacing-02)}
.cm-act{height:var(--btn-height-sm);font-size:var(--font-size-300);padding:var(--btn-padding-sm)}

/* ─── Community preview screen ───────────────────── */

.library-view.cpv-active{padding:0;overflow:hidden;gap:0;height:calc(100vh - var(--topbar-height))}
body.guest .library-view.cpv-active{padding:0}

.cpv{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}

.cpv-body{display:flex;flex:1;min-height:0;overflow:hidden}

.cpv-preview{
  flex:1;min-width:0;
  display:flex;align-items:center;justify-content:center;
  padding:var(--spacing-06);
  overflow:auto;
  background:var(--background);
  position:relative;
}

.cpv-page-wrap .page{box-shadow:var(--shadow-400)}
.cpv-page-wrap .page-content{pointer-events:none;user-select:none}
.cpv-locked .page{pointer-events:none}

/* ─── Guest preview layout (top header, no sidebar) ── */
.cpv--guest{
  overflow:hidden;
  --cpv-guest-pad: max(var(--airplane-padding), calc((100vw - 1200px) / 2));
}

.cpv-guest-hero{
  flex-shrink:0;
  padding:var(--spacing-05) var(--cpv-guest-pad) var(--spacing-05);
  background:var(--background);
}
.cpv-guest-hero .cpv-back{margin-bottom:var(--spacing-04)}
.cpv-guest-title{margin:0 0 var(--spacing-02);color:var(--text-primary)}
.cpv-guest-stats{
  display:flex;align-items:center;gap:var(--spacing-02);
  color:var(--text-secondary);
}
.cpv-guest-stats svg{color:var(--icon-secondary);flex-shrink:0}

/* Author chip (avatar + username) in the doc view — links to /library?author=… */
.cpv-author{
  display:inline-flex;align-items:center;gap:var(--spacing-02);
  color:inherit;text-decoration:none;
  transition:color var(--duration-fast-02) var(--ease-standard-productive);
}
.cpv-author:hover{color:var(--text-primary)}
.cpv-author:hover span{text-decoration:underline}

.cpv-preview--guest{
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:var(--spacing-04) var(--cpv-guest-pad) 0;
}

.cpv-sidebar{
  width:calc(var(--spacing-13) * 2.5);flex-shrink:0;
  border-right:1px solid var(--border-subtle-01);
  background:var(--layer-01);
  padding:var(--spacing-06);
  overflow:hidden;
  display:flex;flex-direction:column;
  gap:0;
  max-height:100%;
}

/* Back link pinned to top */
.cpv-sidebar-top{flex-shrink:0;margin-bottom:var(--spacing-06)}

/* Main content centered */
.cpv-sidebar-main{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}

/* Back breadcrumb */
.cpv-back{
  display:inline-flex;align-items:center;gap:var(--spacing-02);
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--text-helper);text-decoration:none;
  font:var(--fw-medium) var(--t-14) var(--font-sans);
  letter-spacing:var(--font-letter-spacing-loose);
  transition:color var(--duration-fast-02) var(--ease-standard-productive);
}
.cpv-back:hover{color:var(--text-primary)}

/* Title */
.cpv-title{margin:0 0 var(--spacing-03);color:var(--text-primary)}

/* Description */
.cpv-desc{margin:0 0 var(--spacing-03);color:var(--text-secondary);line-height:var(--font-line-height-600)}

/* Meta row: avatar · author · stats */
.cpv-meta{display:flex;align-items:center;gap:var(--spacing-02);color:var(--text-secondary);margin-bottom:var(--spacing-06)}
.cpv-meta svg{color:var(--icon-secondary);flex-shrink:0}

/* Actions — side by side */
.cpv-actions{display:flex;gap:var(--spacing-03);align-items:center}
.cpv-act{flex:1;max-width:none}
.cpv-actions .btn--icon{flex:none}

/* Tags */
.cpv-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-02);min-height:var(--chip-height)}

/* Bottom info pinned */
.cpv-sidebar-bottom{flex-shrink:0;padding-top:var(--spacing-05);border-top:1px solid var(--border-subtle-01);margin-top:auto;display:flex;flex-direction:column;gap:var(--spacing-04)}
.cpv-bottom-stats{display:flex;align-items:center;gap:var(--spacing-02);color:var(--text-helper)}
.cpv-bottom-stats svg{color:var(--icon-secondary);flex-shrink:0}

/* Gate overlay (non-logged-in) */
.cpv-gate{
  position:sticky;bottom:0;
  width:100%;
  pointer-events:none;
  display:flex;flex-direction:column;
  /* `.cpv-page-wrap` uses `zoom: <scale>` which creates a stacking context in
     Blink, and `.page` is `position: relative`. Without an explicit z-index
     here, the doc content can paint above the sticky bar. */
  z-index:1;
}
.cpv-gate-fade{
  height:var(--spacing-13);
  background:linear-gradient(to bottom,transparent,var(--background));
}
.cpv-gate-bar{
  background:var(--background);
  padding:0 0 var(--spacing-05);
  pointer-events:auto;
}
.cpv-gate-content{
  display:flex;align-items:center;gap:var(--spacing-05);
  padding:var(--spacing-05) var(--spacing-06);
  background:var(--color-bg-surface-info);
  border-radius:var(--radius-04);
  border:1px solid var(--color-border);
}
.cpv-gate-msg{
  display:flex;align-items:center;gap:var(--spacing-03);
  flex:1;min-width:0;
  color:var(--text-primary);
}
.cpv-gate-msg svg{color:var(--interactive);flex-shrink:0}

.cm-active-filters {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--spacing-02);
  padding: var(--spacing-03) 0;
}
.cm-active-filters__label { color: var(--text-helper); margin-right: var(--spacing-01); }
.cm-active-filters__chip { display: inline-flex; align-items: center; gap: var(--spacing-01); }
.cm-active-filters__remove {
  border: 0; background: transparent; cursor: pointer;
  font-size: 1em; line-height: 1; padding: 0;
  color: inherit;
}
.cm-active-filters__clear {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-helper);
  text-decoration: underline;
  padding: 0 var(--spacing-02);
}
.cm-active-filters__clear:hover { color: var(--text-primary); }
.cm-page-context {
  text-align: center;
  color: var(--text-helper);
  padding: var(--spacing-03) 0 var(--spacing-02);
}
.cm-load-earlier { display: block; margin: 0 auto var(--spacing-04); }
.cm-sentinel { min-height: 1px; padding: var(--spacing-04) 0; }

@media (max-width: 1024px){
  .cpv-sidebar{width:calc(var(--spacing-13) * 2);padding:var(--spacing-05)}
}
@media (max-width: 900px){
  .library-view{padding:var(--spacing-06) var(--spacing-05)}
  body.guest .library-view{padding-left:var(--spacing-05);padding-right:var(--spacing-05)}
  .lib-community-toolbar{flex-direction:column;align-items:stretch}
  .lib-community-toolbar .docs-search{max-width:none;flex:none}
  .lib-toolbar-right{justify-content:flex-end}
  .cpv-body{flex-direction:column}
  .cpv-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border-subtle-01)}
  .cpv-preview{min-height:50vh}
  .cpv-gate-content{flex-direction:column;align-items:stretch;gap:var(--spacing-03)}
  .cpv--guest{--cpv-guest-pad:var(--spacing-05)}
}