/* ---- design tokens: inherit from the prototype if present, else self-define ---- */
/* Tokens live at :root so popovers and toasts (which append to document.body,
   outside #blauw-shelves) can resolve var(--bs-*) correctly. They're still
   namespaced with --bs- so they won't collide with anything on the host page. */
:root{
  --bs-block:#f1f1f1;          /* per studio spec — flat grey block */
  --bs-block-hover:#ececec;    /* 100ms hover target */
  --bs-block-line:#dadada;     /* 1px border */
  --bs-radius:1px;             /* per studio spec */
  --bs-blauw:#1a36e8;
  --bs-blauw-sel:#1451eb;      /* selected tab fill (per studio spec) */
  --bs-blauw-deep:#0e1f9c;
  --bs-ink:#1a1a1a;            /* Blauw Black — the only text colour */
  --bs-page:#f9f9f9;           /* body background — blocks sit directly on this */
  --bs-white:#f1f1f1;          /* "white" text per studio spec */
  --bs-font:'Roboto', Arial, sans-serif;
  --bs-ease:cubic-bezier(.22,.61,.36,1);
}
#blauw-shelves{
  font-family:var(--bs-font);
  color:var(--bs-ink);
  /* 1rem gap between the embed and the Webflow tabs above (handoff §12). */
  margin-top:1rem;
}
/* Type roles mirror the live Webflow classes (Roboto). The embed defines them
   self-contained, and also tags elements with the real class names so they
   inherit the site's versions when present.
   .h3-rich-text          Roboto 400  1.3rem/1.3rem  #1a1a1a   (titles)
   .rich-text-blauw-films Roboto 300  1.1rem/1.5rem  #1a1a1a   (body)
   .paragraph-rich-test-2 Roboto 300  0.9rem/1.4rem  #1a1a1a   (small info)
   .paragraph-rich-test-2.is-normal  same but Roboto 400       (small, normal) */
#blauw-shelves .h3-rich-text{font-family:var(--bs-font);font-weight:400;font-size:1.3rem;line-height:1.3rem;color:var(--bs-ink)}
#blauw-shelves .rich-text-blauw-films{font-family:var(--bs-font);font-weight:300;font-size:1.1rem;line-height:1.5rem;color:var(--bs-ink)}
#blauw-shelves .paragraph-rich-test-2{font-family:var(--bs-font);font-weight:300;font-size:.9rem;line-height:1.4rem;color:var(--bs-ink)}
#blauw-shelves .paragraph-rich-test-2.is-normal{font-weight:400}

/* ---- state wrappers ---- */
#blauw-shelves [data-bs-state]{display:none}
#blauw-shelves[data-state="loading"] [data-bs-state="loading"],
#blauw-shelves[data-state="error"]   [data-bs-state="error"],
#blauw-shelves[data-state="empty"]   [data-bs-state="empty"],
#blauw-shelves[data-state="ready"]   [data-bs-state="ready"]{display:block}

/* ---- loading / error ---- */
.bs-note{
  padding:2.4rem 1.5rem;text-align:center;color:var(--bs-ink);opacity:.7;
  font-size:.9rem;line-height:1.4rem;font-weight:300;
}
.bs-note .bs-spin{
  width:1.1rem;height:1.1rem;margin:0 auto .8rem;border-radius:50%;
  border:2px solid var(--bs-block-line);border-top-color:var(--bs-blauw);
  animation:bsSpin .7s linear infinite;
}
@keyframes bsSpin{to{transform:rotate(360deg)}}
.bs-retry{
  margin-top:.9rem;font-family:var(--bs-font);font-weight:400;font-size:.9rem;
  background:none;border:1px solid var(--bs-block-line);border-radius:var(--bs-radius);
  padding:.5rem 1rem;color:var(--bs-ink);cursor:pointer;transition:.15s;
}
.bs-retry:hover{border-color:var(--bs-blauw);color:var(--bs-blauw)}

/* ---- one curation row: bento (left) + info block (right) ---- */
.bs-row{
  display:grid;grid-template-columns:13.5rem 1fr;gap:1.4rem;
  background:var(--bs-block);
  border:1px solid var(--bs-block-line);
  border-radius:var(--bs-radius);
  overflow:hidden;margin-bottom:1.1rem;
  cursor:pointer;
  transition:background-color .1s linear;   /* per studio spec — 100ms */
}
.bs-row:hover{background:var(--bs-block-hover)}
.bs-row:focus-visible{outline:2px solid var(--bs-blauw);outline-offset:2px}

/* ---- bento grid — auto-composed portrait of the shelf ----
   gap shows the page through (no second surface): grid bg = page bg ---- */
.bs-bento{
  display:grid;gap:2px;background:var(--bs-page);
  padding:0;aspect-ratio:1/1;position:relative;
}
.bs-bento.b-1{grid-template-columns:1fr;grid-template-rows:1fr}
.bs-bento.b-2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.bs-bento.b-3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.bs-bento.b-3 .bs-cell:first-child{grid-row:1/3}
.bs-bento.b-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.bs-bento.b-5{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr}
.bs-bento.b-5 .bs-cell:first-child{grid-column:1/3;grid-row:1/2}
.bs-cell{
  background:#e2e2e2;position:relative;overflow:hidden;
  background-size:cover;background-position:center;
}
/* type-tinted fallback when no thumb_url (null is common — see live data) */
.bs-cell[data-tint="film"],.bs-cell[data-tint="watch"]{background-image:linear-gradient(135deg,#1a36e8,#0e1f9c)}
.bs-cell[data-tint="track"]{background-image:linear-gradient(135deg,#7c8cff,#1a36e8)}
.bs-cell[data-tint="wiki"]{background-image:linear-gradient(160deg,#c8ccdb,#8f93a6)}
.bs-cell[data-tint="story"],.bs-cell[data-tint="series"]{background-image:linear-gradient(135deg,#11135a,#1a36e8)}
.bs-cell[data-tint="research"],.bs-cell[data-tint="case-study"],.bs-cell[data-tint="learning"]{background-image:linear-gradient(135deg,#3a4a8f,#1a36e8)}
.bs-cell[data-tint="spotlight"]{background-image:linear-gradient(135deg,#7c8cff,#1a36e8)}
.bs-cell[data-tint="gallery"],.bs-cell[data-tint="wallpaper"],.bs-cell[data-tint="sticker"]{background-image:linear-gradient(135deg,#e8e9ee,#b7bbcb)}
.bs-cell[data-tint="support"]{background-image:linear-gradient(135deg,#c8ccdb,#8f93a6)}
.bs-cell--more{
  display:flex;align-items:center;justify-content:center;
  background:#e2e2e2;color:var(--bs-ink);
  font-family:var(--bs-font);font-weight:400;font-size:.95rem;
}
.bs-ctag{
  position:absolute;left:.4rem;bottom:.34rem;font-size:.62rem;line-height:1;
  font-weight:400;color:var(--bs-white);
}
.bs-cell[data-tint="wiki"] .bs-ctag,
.bs-cell[data-tint="gallery"] .bs-ctag,
.bs-cell[data-tint="wallpaper"] .bs-ctag,
.bs-cell[data-tint="sticker"] .bs-ctag,
.bs-cell[data-tint="support"] .bs-ctag{color:var(--bs-ink)}
.bs-cell--has-thumb .bs-ctag{
  color:var(--bs-white);text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* ---- info block ---- */
.bs-info{padding:1.3rem 1.5rem 1.3rem 0;display:flex;flex-direction:column}
.bs-type{ /* small info text, Roboto 300 0.9rem — no caps */
  color:var(--bs-ink);opacity:.6;display:flex;align-items:center;gap:.4rem;
  font-size:.9rem;line-height:1.4rem;font-weight:300;
}
.bs-type .bs-pl{color:var(--bs-blauw);opacity:1}
.bs-info h3{ /* title role .h3-rich-text */
  font-family:var(--bs-font);font-weight:400;font-size:1.3rem;line-height:1.3rem;
  color:var(--bs-ink);margin:.45rem 0 .3rem;
}
.bs-break{font-size:.9rem;line-height:1.4rem;font-weight:300;color:var(--bs-ink);opacity:.75}
.bs-foot{
  margin-top:auto;padding-top:1rem;display:flex;align-items:center;
  gap:1.2rem;font-size:.9rem;line-height:1.4rem;font-weight:300;
  color:var(--bs-ink);opacity:.6;flex-wrap:wrap;
}

/* ---- empty: no shelves at all (first impression) ---- */
.bs-empty-all{
  border:1px dashed var(--bs-block-line);border-radius:var(--bs-radius);
  padding:3.2rem 1.5rem;text-align:center;color:var(--bs-ink);
  background:transparent;
}
.bs-empty-all strong{
  font-family:var(--bs-font);font-weight:400;color:var(--bs-ink);
  display:block;margin-bottom:.5rem;font-size:1.3rem;line-height:1.3rem;
}
.bs-empty-all p{
  max-width:30rem;margin:0 auto;font-weight:300;font-size:1.1rem;line-height:1.5rem;
}

/* ---- empty: an individual shelf that has no items ---- */
.bs-row--empty{cursor:pointer}
.bs-row--empty .bs-bento{
  background:transparent;border-right:1px dashed var(--bs-block-line);
  display:flex;align-items:center;justify-content:center;padding:0;
}
.bs-row--empty .bs-bento svg{width:2rem;height:2rem;color:var(--bs-ink);opacity:.35}

/* ---- view switching (list <-> detail) ---- */
#blauw-shelves [data-bs-view]{display:block}
#blauw-shelves [data-bs-view][hidden]{display:none}

/* ---- filter bar — separate blocks, 0.5rem apart ---- */
.bs-curate-bar{display:flex;gap:.5rem;margin-bottom:1.6rem;align-items:center}
.bs-seg{display:inline-flex;gap:.5rem}
.bs-seg-btn{
  background:var(--bs-block);border:1px solid var(--bs-block-line);
  border-radius:var(--bs-radius);cursor:pointer;color:var(--bs-ink);
  padding:.5rem 1rem;transition:background-color .1s linear,color .1s linear,border-color .1s linear;
}
.bs-seg-btn:not(.is-on):hover{background:var(--bs-block-hover)}
#blauw-shelves .bs-seg-btn.is-on,
#blauw-shelves .bs-seg-btn.is-on.paragraph-rich-test-2{
  background:var(--bs-blauw-sel);border-color:var(--bs-blauw-sel);color:var(--bs-page);
}

/* ---- back affordance ---- */
.bs-back{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  background:none;border:none;color:var(--bs-ink);opacity:.65;
  padding:0;margin-bottom:1.2rem;transition:opacity .1s linear,color .1s linear;
}
.bs-back:hover{opacity:1;color:var(--bs-blauw)}
.bs-back svg{width:.95rem;height:.95rem}

/* ---- detail head ---- */
.bs-detail-head{margin-bottom:1.6rem}
.bs-detail-head .bs-type{opacity:.6;margin-bottom:.2rem}
.bs-detail-head h3{margin:0 0 .35rem}
.bs-detail-head .bs-break{opacity:.75}

/* ---- item grid (read-only in Step 2; Step 3 makes it draggable) ---- */
.bs-item-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
  gap:1.1rem;
}
.bs-item{
  background:var(--bs-block);border:1px solid var(--bs-block-line);
  border-radius:var(--bs-radius);overflow:hidden;position:relative;
  transition:background-color .1s linear,transform .18s var(--bs-ease),box-shadow .18s var(--bs-ease);
}
.bs-item:hover{background:var(--bs-block-hover)}
/* drag handle — the only touch-action:none surface, so the page still scrolls */
.bs-grip{
  position:absolute;top:.4rem;right:.4rem;z-index:2;
  width:1.9rem;height:1.9rem;display:flex;align-items:center;justify-content:center;
  background:var(--bs-block);border:1px solid var(--bs-block-line);
  border-radius:var(--bs-radius);color:var(--bs-ink);opacity:.45;cursor:grab;
  touch-action:none;transition:opacity .1s linear,background-color .1s linear;
}
.bs-grip:hover,.bs-grip:focus-visible{opacity:1;background:var(--bs-block-hover);outline:none}
.bs-grip:focus-visible{outline:2px solid var(--bs-blauw);outline-offset:1px}
.bs-grip svg{width:1.1rem;height:1.1rem;pointer-events:none}
.bs-grip:active{cursor:grabbing}
/* grip has been pressed and is arming the hold (subtle cue) */
.bs-grip.bs-arming{opacity:1;background:var(--bs-block-hover)}

/* the original card's slot while its ghost floats: invisible but holds space */
.bs-item.bs-placeholder{opacity:0 !important;pointer-events:none}
/* a keyboard-selected card (arrow-key reorder mode) */
.bs-item.bs-kb-active{outline:2px solid var(--bs-blauw);outline-offset:2px}

/* the floating ghost that follows the pointer (lives on <body>; visuals are
   inlined by JS so it renders solid outside the #blauw-shelves scope) */
.bs-ghost{
  position:fixed;left:0;top:0;z-index:1000;margin:0;pointer-events:none;
  box-shadow:0 12px 32px rgba(20,23,40,.22);
  will-change:transform;
}
.bs-ghost .bs-grip{opacity:1}
.bs-ghost.bs-dropping{transition:transform .18s var(--bs-ease),box-shadow .18s var(--bs-ease)}

/* tiny inline reorder status / error */
.bs-arrange-msg{
  margin-top:.9rem;color:var(--bs-ink);opacity:.6;font-weight:300;font-size:.9rem;line-height:1.4rem;
}
.bs-arrange-msg.is-error{color:#b4232a;opacity:1}
.bs-item-thumb{
  aspect-ratio:16/10;background:#e2e2e2;position:relative;overflow:hidden;
  background-size:cover;background-position:center;
}
.bs-item-thumb[data-tint="film"],.bs-item-thumb[data-tint="watch"]{background-image:linear-gradient(135deg,#1a36e8,#0e1f9c)}
.bs-item-thumb[data-tint="track"]{background-image:linear-gradient(135deg,#7c8cff,#1a36e8)}
.bs-item-thumb[data-tint="wiki"]{background-image:linear-gradient(160deg,#c8ccdb,#8f93a6)}
.bs-item-thumb[data-tint="story"],.bs-item-thumb[data-tint="series"]{background-image:linear-gradient(135deg,#11135a,#1a36e8)}
.bs-item-thumb[data-tint="research"],.bs-item-thumb[data-tint="case-study"],.bs-item-thumb[data-tint="learning"]{background-image:linear-gradient(135deg,#3a4a8f,#1a36e8)}
.bs-item-thumb[data-tint="spotlight"]{background-image:linear-gradient(135deg,#7c8cff,#1a36e8)}
.bs-item-thumb[data-tint="gallery"],.bs-item-thumb[data-tint="wallpaper"],.bs-item-thumb[data-tint="sticker"]{background-image:linear-gradient(135deg,#e8e9ee,#b7bbcb)}
.bs-item-thumb[data-tint="support"]{background-image:linear-gradient(135deg,#c8ccdb,#8f93a6)}
.bs-item-body{padding:.8rem .9rem 1rem}
.bs-item-type{color:var(--bs-ink);opacity:.55;margin-bottom:.15rem}
.bs-item-title{color:var(--bs-ink)}
.bs-item-title a{color:inherit;text-decoration:none}
.bs-item-title a:hover{color:var(--bs-blauw)}


/* ---- detail-view action bar ---- */
.bs-detail-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:1.5rem;margin-bottom:1.6rem;flex-wrap:wrap;
}
.bs-detail-meta{min-width:0}
.bs-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.bs-act{
  background:var(--bs-block);border:1px solid var(--bs-block-line);
  border-radius:var(--bs-radius);color:var(--bs-ink);cursor:pointer;
  padding:.5rem 1rem;transition:background-color .1s linear,color .1s linear,border-color .1s linear;
}
.bs-act:hover{background:var(--bs-block-hover)}
.bs-act.is-on{background:var(--bs-blauw-sel);border-color:var(--bs-blauw-sel);color:var(--bs-page)}
#blauw-shelves .bs-act.is-on.paragraph-rich-test-2{color:var(--bs-page)}
.bs-act--danger:hover{color:#b4232a;border-color:#b4232a}

/* ---- list-row kebab + popover menu ---- */
.bs-row{position:relative}
.bs-kebab{
  position:absolute;top:.6rem;right:.6rem;z-index:2;
  width:1.9rem;height:1.9rem;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;border-radius:var(--bs-radius);
  color:var(--bs-ink);opacity:.45;cursor:pointer;
  transition:opacity .1s linear,background-color .1s linear,border-color .1s linear;
}
.bs-row:hover .bs-kebab,.bs-kebab:focus-visible{opacity:1}
.bs-kebab:hover{background:var(--bs-page);border-color:var(--bs-block-line)}
.bs-kebab svg{width:1.1rem;height:1.1rem;pointer-events:none}

.bs-menu{
  position:absolute;z-index:50;min-width:11rem;
  background:var(--bs-page);border:1px solid var(--bs-block-line);
  border-radius:var(--bs-radius);
  padding:.3rem;
}
.bs-menu[hidden]{display:none}
.bs-menu-item{
  display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  padding:.55rem .7rem;background:none;border:none;cursor:pointer;
  color:var(--bs-ink);border-radius:var(--bs-radius);
  transition:background-color .1s linear;
}
.bs-menu-item:hover{background:var(--bs-block-hover)}
.bs-menu-item--danger{color:#b4232a}
.bs-menu-item--danger:hover{background:#fbeaea}
.bs-menu hr{border:none;border-top:1px solid var(--bs-block-line);margin:.3rem 0}

/* inline confirm strip inside the menu (for shelf delete) */
.bs-confirm{padding:.55rem .7rem;color:var(--bs-ink);opacity:.85}
.bs-confirm-row{display:flex;gap:.4rem;margin-top:.4rem}
.bs-confirm-row button{
  flex:1;padding:.4rem .7rem;border:1px solid var(--bs-block-line);
  background:var(--bs-block);border-radius:var(--bs-radius);cursor:pointer;
  color:var(--bs-ink);font:inherit;
}
.bs-confirm-row .bs-confirm-yes:hover{background:#fbeaea;border-color:#b4232a;color:#b4232a}
.bs-confirm-row .bs-confirm-no:hover{background:var(--bs-block-hover)}

/* ---- edit mode: X buttons replace grips while .bs-editing is on the grid ---- */
.bs-remove{
  position:absolute;top:.4rem;right:.4rem;z-index:3;display:none;
  width:1.9rem;height:1.9rem;align-items:center;justify-content:center;
  background:var(--bs-block);border:1px solid var(--bs-block-line);
  border-radius:var(--bs-radius);color:var(--bs-ink);opacity:.7;cursor:pointer;
  transition:opacity .1s linear,background-color .1s linear,color .1s linear,border-color .1s linear;
}
.bs-remove:hover{opacity:1;background:#fbeaea;color:#b4232a;border-color:#b4232a}
.bs-remove svg{width:1rem;height:1rem;pointer-events:none}
.bs-item-grid.bs-editing .bs-grip{display:none}
.bs-item-grid.bs-editing .bs-remove{display:flex}

/* inline item-confirm overlay */
.bs-item.bs-confirming{position:relative}
.bs-item-confirm{
  position:absolute;inset:0;background:rgba(241,241,241,.96);z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;padding:1rem;text-align:center;
}
.bs-item-confirm-row{display:flex;gap:.4rem}
.bs-item-confirm-row button{
  padding:.35rem .8rem;border:1px solid var(--bs-block-line);
  background:var(--bs-page);border-radius:var(--bs-radius);cursor:pointer;
  color:var(--bs-ink);font:inherit;
}
.bs-item-confirm-row .bs-ic-yes:hover{background:#fbeaea;border-color:#b4232a;color:#b4232a}
.bs-item-confirm-row .bs-ic-no:hover{background:var(--bs-block-hover)}

/* ---- toast (brief feedback for copy-link, stubbed visibility, etc.) ---- */
.bs-toast{
  position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);z-index:200;
  background:var(--bs-blauw-sel);color:var(--bs-page);
  border:1px solid var(--bs-blauw-sel);border-radius:var(--bs-radius);
  padding:.6rem 1.1rem;opacity:0;transition:opacity .2s var(--bs-ease);
  pointer-events:none;
}
/* defeat .paragraph-rich-test-2 which would otherwise force #1a1a1a text */
#blauw-shelves .bs-toast,
#blauw-shelves .bs-toast.paragraph-rich-test-2{color:var(--bs-page)}
.bs-toast[data-show="1"]{opacity:1}
.bs-toast.is-error{background:#b4232a;border-color:#b4232a}


@media (max-width:640px){
  .bs-row{grid-template-columns:7.5rem 1fr;gap:1rem}
  .bs-info{padding:1rem 1rem 1rem 0}
  .bs-item-grid{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.8rem}
  .bs-detail-head{flex-direction:column;align-items:stretch}
  .bs-actions{justify-content:flex-start}
}

/* ---- inline-editable title + curator note (detail view) ---- */
.bs-detail-title-input,
.bs-detail-note-input{
  display:block;width:100%;
  font:inherit;color:inherit;
  background:transparent;border:0;
  border-bottom:1px solid transparent;
  padding:.05rem 0;margin:0;
  outline:0;
  resize:none;overflow:hidden;
  box-shadow:none;
  transition:border-color .15s ease;
}
.bs-detail-title-input{margin:0 0 .35rem;}
.bs-detail-note-input{
  font-style:italic;opacity:.85;
  margin:.6rem 0 0;
}
.bs-detail-note-input::placeholder{font-style:italic;opacity:.55;}
.bs-detail-title-input:hover:not(:disabled),
.bs-detail-note-input:hover:not(:disabled){
  border-bottom-color:var(--bs-block-line);
}
.bs-detail-title-input:focus,
.bs-detail-note-input:focus{
  border-bottom-color:var(--bs-blauw);
}
.bs-detail-title-input:disabled,
.bs-detail-note-input:disabled{
  cursor:default;
  border-bottom-color:transparent;
}