/* --- Blackboard widgets (scoped) --- */
:root {
  --bb-gap: 1rem;
  --bb-card-radius: 16px;
  --bb-card-bg: var(--header-bg, #ffffff);
  --bb-card-border: var(--border-light, #e6e6e6);
  --bb-card-shadow: var(--box-shadow, 0 6px 18px rgba(0,0,0,.06));
  --bb-title-desktop: 1.75rem;
  --bb-title-pad: 1.40rem;
  --bb-title-phone: 1.30rem;
  --bb-title-lines: 3; /* default max lines for titles */
}

:root{
  --bb-pro-bg: #1f4f63;        /* ribbon color */
  --bb-pro-text: #fff;         /* ribbon text color */
  --bb-pro-shadow: rgba(0,0,0,.18);
}

/* needed so the ribbon clips to rounded corners */
.bb-card { position: relative; overflow: hidden; }

/* diagonal PRO ribbon (top-left) */
.bb-card[data-pro]::before{
  content: "PRO";
  position: absolute;
  top: 10px;
  left: -36px;                 /* move stripe into the corner */
  width: 128px;
  padding: 6px 0;
  text-align: center;
  background: var(--bb-pro-bg);
  color: var(--bb-pro-text);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .08em;
  transform: rotate(-45deg);
  box-shadow: 0 2px 8px var(--bb-pro-shadow);
  pointer-events: none;        /* won’t block drag/clicks */
  z-index: 2;
}

/* Hide the PRO ribbon when the signed‑in user is Pro */
:root[data-pro-user="1"] .bb-card[data-pro]::before,
body.is-pro .bb-card[data-pro]::before{
  display: none !important;
  content: none;
}

.bb-root {
  width: min(860px, 96%);
  margin-inline: auto;
  padding-block: clamp(12px, 2.5vw, 28px);
  --bb-title-size: var(--bb-title-desktop);
}
.bb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: var(--bb-gap);
}
@media (max-width: 900px) {
  .bb-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .bb-root { --bb-title-size: var(--bb-title-pad); }
}
@media (max-width: 520px) {
  .bb-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .bb-root { --bb-title-size: var(--bb-title-phone); --bb-title-lines: 2; }
}
.bb-card {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1; /* rounded squares */
  background: var(--bb-card-bg);
  border: 1px solid var(--bb-card-border);
  border-radius: var(--bb-card-radius);
  box-shadow: var(--bb-card-shadow);
  padding: 1rem;
  user-select: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .2s;
}
.bb-card:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
.bb-card:hover { transform: translateY(-2px); }
.bb-card__title {
  font-size: var(--bb-title-size);
  line-height:2;
  text-align: center;
  margin: 0 .25rem; /* a bit of side breathing room */

  /* wrap & hyphenate long words */
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  text-wrap: balance;

  /* clamp to N lines, without manual <br> */
  display: -webkit-box;              /* Chromium/WebKit */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--bb-title-lines, 3);
  line-clamp: var(--bb-title-lines, 3);
  overflow: hidden;
}

  /* --- Drag & Drop + Edit Mode --- */
    .bb-grid { position: relative; }
    .bb-card { touch-action: pan-x pan-y; }
    .bb-card.is-dragging { opacity: 0; }

    /* Jiggle animation when in edit mode */
    .bb-edit .bb-card { cursor: grab; }
    .bb-edit .bb-card:active { cursor: grabbing; }
    .bb-edit .bb-card { animation: bb-jiggle .18s ease-in-out infinite alternate; }
    @keyframes bb-jiggle { from { transform: rotate(-0.6deg) } to { transform: rotate(0.6deg) } }

    /* Placeholder occupying future position during drag */
    .bb-placeholder {
      border: 0;
      background: rgba(0,0,0,.04); /* soft neutral block, no lines */
      border-radius: var(--bb-card-radius, 16px);
      box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
    }
    /* anchor-cards don’t look like links and don’t start native drag */
    .bb-card { text-decoration: none; color: inherit; -webkit-user-drag: none; }
    .bb-card:visited { color: inherit; }

    .bb-edit-fab {
      position: relative; z-index: 1; /* ensure above the divider line */
      width: 36px; height: 36px; border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      border: none; /* no border */
      background: var(--page-bg); /* same as page background */
      font-size: 20px; line-height: 1; cursor: pointer; color: rgba(0,0,0,.6);
    }
    .bb-edit .bb-edit-fab { background: var(--page-bg); }

    /* Floating ghost that follows cursor during drag (custom DnD) */
    .bb-ghost {
      position: fixed; z-index: 1000; inset: 0 auto auto 0; pointer-events: none;
      transform: none; /* position via JS so cursor is dead-center */
      box-shadow: 0 10px 24px rgba(0,0,0,.14);
      opacity: .98;
    }
    .bb-card { will-change: transform; }

    .bb-controls { display: flex; justify-content: center; margin-block: 12px 0; }

    /* Library visibility via wrapper */
    .bb-library-wrap { display: none; }
    .bb-edit .bb-library-wrap { display: block; }

    .bb-controls-bar { position: relative; display: flex; justify-content: center; margin: 12px 0 10px; }
    .bb-controls-bar::before {
      content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
      height: 1px; background: linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 10%, rgba(0,0,0,.12) 90%, transparent 100%);
      z-index: 0; /* behind the button */
    }

    /* Library is a visible drop zone in edit mode (even when empty) */
    .bb-edit .bb-grid--library {
      min-height: 170px;
      padding-block: 6px;
      background: rgba(0,0,0,.02);
      border-radius: var(--bb-card-radius, 16px);
    }

    /* A single, subtle empty slot that acts as a drop target */
    .bb-empty-slot { display: none; }
    .bb-edit .bb-empty-slot {
      display: block;
      min-height: 96px;
      border-radius: var(--bb-card-radius, 16px);
      border: 2px dashed rgba(0,0,0,.15);
      background: rgba(0,0,0,.02);
    }
    /* Mask the divider line under the button so it doesn't show through */
    .bb-edit-fab::before {
      content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
      width: calc(100% + 14px); height: 2px; border-radius: 2px;
      background: var(--page-bg);
      z-index: -1; /* stays behind the icon but above the divider */
    }
    /* Fill the circle of both icons with the page background */
    #bb-icon-add circle, #bb-icon-close circle { fill: var(--page-bg); }


  /*bb-dnd-styles*/
     html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    .bb-root, .bb-card, .bb-card__title { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    .bb-ghost { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    .bb-root { position: relative; }
    /* Easier dragging: prevent text selection and show grab cursor while editing */
    body.bb-edit { user-select: none; }
    body.bb-edit .bb-card { cursor: grab; }
    body.bb-edit .bb-card:active { cursor: grabbing; }
    .bb-card { text-decoration: none; color: inherit; -webkit-user-drag: none; }
    .bb-card:visited { color: inherit; }
    /* ---- Widget progress UI ---- */
    .bb-card { position: relative; }
    .bb-card__meter { margin-top: 6px; height: 6px; background: #e8edf3; border-radius: 999px; overflow: hidden; }
    .bb-card__meter-bar { height: 100%; width: 0%; background: #34495e; transition: width .35s ease; }
    .bb-card__percent { position: absolute; bottom: 8px; left: 10px; font-size: 12px; color: #34495e; opacity: .9; }
    .bb-card__done { position: absolute; top: 8px; left: 8px; display: none; width: 22px; height: 22px; border-radius: 999px; background: #eaf2f9; border: 1px solid #d5e1ee; align-items: center; justify-content: center; }
    .bb-card__done svg { width: 16px; height: 16px; stroke: #34495e; }
    .bb-card.is-complete .bb-card__done { display: inline-flex; }
    /* ===== Pro banner visibility rules ===== */
    /* While we haven't resolved pro status yet, avoid flashing the upsell */
    html.pro-check-pending .pro-banner,
    html.pro-check-pending [data-pro-banner],
    html.pro-check-pending [data-upsell="pro"],
    html.pro-check-pending .header-pro-banner { visibility: hidden !important; }
    /* Also hide the card ribbon during pending check to avoid any flash */
    html.pro-check-pending .bb-card[data-pro]::before { content: none !important; display: none !important; }

    /* Once confirmed pro, hide all upsell banners and pro-only chips */
    body.is-pro .pro-banner,
    body.is-pro [data-pro-banner],
    body.is-pro [data-upsell="pro"],
    body.is-pro .header-pro-banner,
    body.is-pro .pro-cta,
    body.is-pro .pro-widget-banner { display: none !important; }

    /* Make sure the ribbon is completely suppressed for pro users */
    body.is-pro .bb-card[data-pro]::before,
    html.is-pro .bb-card[data-pro]::before { content: none !important; display: none !important; }
    /* Attribute-based suppression as well */
    html[data-pro="1"] .bb-card[data-pro]::before { content: none !important; display: none !important; }

    /* Optional: hide any inline badges/locks for pro users */
    body.is-pro .bb-card[data-pro] .pro-chip,
    body.is-pro .bb-card[data-pro] .lock,
    body.is-pro .bb-card[data-pro] .badge-pro { display: none !important; }

    /* Tag-based fallback: if the HTML element says pro, prefer it */
    html.is-pro [data-pro],
    html.is-pro .bb-card[data-pro] { --bb-pro-bg: transparent; }
    html[data-pro="1"] [data-pro],
    html[data-pro="1"] .bb-card[data-pro] { --bb-pro-bg: transparent; }