/* ===== Bucket List =====
   BRIEF-112, Steps 1-2. Shell, season view, week bar, day grid, item list,
   add input, mark done, sharing, sign-in nudge, headstart, season popup.
   Young Soul (light) skin. Old Soul token overrides arrive in Step 4. */

:root {
  --bl-white:     #f4f7f5;
  --bl-off-white: #eaf0ec;
  --bl-sage:      #5c8a7a;
  --bl-fern:      #3d6655;
  --bl-clay:      #c4896a;
  --bl-pollen:    #f0cc60;
  --bl-spark:     #7ec8e3;
  --bl-text:      #2e3d3a;
  --bl-rule:      #ccddd6;
  --bl-mist:      #b8d0c8;
  --bl-morning:   #dce8e2;
  --bl-radius:    18px;
  --bl-radius-sm: 10px;
}

/* ── Light skin on the shell ───────────────────────────────────────────── */

html, body {
  background:          var(--bl-white);
  overscroll-behavior: none;
}

.thing-shell {
  background:     var(--bl-white);
  color:          var(--bl-text);
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
}

.thing-shell .thing-stage {
  flex:            1 1 auto;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;   /* override main.css justify-content: center */
  gap:             0;            /* override main.css gap: 32px */
  padding:         24px 24px 60px;
}

.thing-shell .bl-footer {
  background: var(--bl-off-white);
}
.thing-shell .bl-footer a {
  color:               var(--bl-sage);
  border-bottom-color: var(--bl-mist);
}
.thing-shell .bl-footer a:hover { color: var(--bl-fern); }
.bl-footer #boss-toggle { color: var(--bl-mist); }

.bl-wrap {
  width:     100%;
  max-width: 520px;
}

/* ── Shared button primitives ───────────────────────────────────────────── */

.bl-btn-primary {
  background:    var(--bl-sage);
  color:         #fff;
  border:        none;
  border-radius: var(--bl-radius-sm);
  padding:       8px 18px;
  font-family:   'Jost', system-ui, sans-serif;
  font-weight:   500;
  font-size:     14px;
  cursor:        pointer;
  line-height:   1;
}
.bl-btn-primary:hover { background: var(--bl-fern); }

.bl-btn-ghost {
  background:    transparent;
  color:         var(--bl-sage);
  border:        1px solid var(--bl-rule);
  border-radius: var(--bl-radius-sm);
  padding:       8px 18px;
  font-family:   'Jost', system-ui, sans-serif;
  font-weight:   300;
  font-size:     14px;
  cursor:        pointer;
  line-height:   1;
}
.bl-btn-ghost:hover { border-color: var(--bl-sage); }

/* ── Old Soul dark skin — matches meeting-tax / office depth ─────────────── */

body.bl-old-soul {
  --bl-white:     #2e3d3a;
  --bl-off-white: #34453f;
  --bl-text:      #f8f9f7;
  --bl-sage:      #6b9e8a;
  --bl-fern:      #5c8a7a;
  --bl-rule:      rgba(248,249,247,0.12);
  --bl-mist:      #8aa6a0;
  --bl-morning:   rgba(248,249,247,0.05);
}

body.bl-old-soul .bl-week.is-done,
body.bl-old-soul .bl-day.is-done  { background: var(--bl-sage); opacity: 1; }

body.bl-old-soul .bl-week.is-now,
body.bl-old-soul .bl-day.is-now   { background: var(--bl-pollen); border-color: var(--bl-pollen); }

body.bl-old-soul .bl-week.is-coming,
body.bl-old-soul .bl-day.is-coming {
  background:   transparent;
  border:       1px solid rgba(248,249,247,0.16);
}

/* Stickers straighten up in Old Soul — handled in JS; CSS only sets bg/border */
body.bl-old-soul .bl-item {
  background:   var(--bl-off-white);
  border-color: rgba(255,255,255,0.07);
}

/* Title switches to Cormorant (meeting-tax / serious) — no italic */
body.bl-old-soul .bl-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
}

/* No party colours in Old Soul */
body.bl-old-soul .bl-colour-party-section { display: none; }

/* Scrapbook cards */
body.bl-old-soul .bl-scrapbook-card { background: var(--bl-off-white); }

/* Section 1: Old Soul modal edges */
body.bl-old-soul .bl-colour-sheet {
  border:     1px solid rgba(248,249,247,0.15);
  box-shadow: 0 12px 48px rgba(0,0,0,0.60);
}

body.bl-old-soul .bl-summary-sheet {
  border:     1px solid rgba(248,249,247,0.15);
  box-shadow: 0 12px 48px rgba(0,0,0,0.60);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.bl-header {
  text-align: center;
  margin:     8px 0 16px;
}

.bl-header-controls {
  margin-top: 8px;
}

.bl-title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size:   32px;
  line-height: 1.05;
  color:       var(--bl-text);
  margin:      0;
}

.bl-tagline {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   15px;
  color:       var(--bl-sage);
  margin:      8px 0 0;
}

/* ── View-only banner ──────────────────────────────────────────────────── */

.bl-view-banner {
  background:    #fef3c7;
  border:        1px solid #fde68a;
  color:         #78350f;
  text-align:    center;
  padding:       10px 16px;
  font-size:     13px;
  font-weight:   500;
  border-radius: var(--bl-radius-sm);
  margin-bottom: 14px;
  line-height:   1.4;
}

body.bl-old-soul .bl-view-banner {
  background: #3a2e10;
  border-color: #5a4820;
  color: #f0d080;
}

.bl-view-banner-link {
  color:           #78350f;
  text-decoration: underline;
  margin-left:     4px;
  white-space:     nowrap;
}
.bl-view-banner-link:hover { opacity: 0.75; }

body.bl-old-soul .bl-view-banner-link { color: #f0d080; }

/* ── Season label + share button row ───────────────────────────────────── */

.bl-season { margin: 0 0 22px; }

.bl-season-row {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  margin:          0 0 10px;
}

.bl-season-label {
  font-family:    'Jost', system-ui, sans-serif;
  font-weight:    500;
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--bl-sage);
  margin:         0;
}

.bl-share-btn {
  background:     transparent;
  border:         none;
  color:          var(--bl-mist);
  font-family:    'Jost', system-ui, sans-serif;
  font-weight:    300;
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  cursor:         pointer;
  line-height:    1;
  padding:        2px 4px;
  transition:     color 120ms;
}
.bl-share-btn:hover { color: var(--bl-sage); }

/* Share popup */
.bl-share-popup {
  background:    var(--bl-morning);
  border-radius: var(--bl-radius-sm);
  padding:       14px 40px 14px 16px;
  margin-top:    10px;
  margin-bottom: 16px;
  position:      relative;
  opacity:       0;
  transform:     translateY(-4px);
  transition:    opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}
.bl-share-popup.is-open {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}
.bl-share-popup[hidden] { display: none; }
.bl-share-popup-text {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   14px;
  color:       var(--bl-text);
  margin:      0;
  line-height: 1.5;
}
.bl-share-popup-copied {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 400;
  font-size:   13px;
  color:       var(--bl-sage);
  margin:      6px 0 0;
}
.bl-share-popup-close {
  position:    absolute;
  top:         10px;
  right:       10px;
  background:  transparent;
  border:      none;
  color:       var(--bl-mist);
  font-size:   14px;
  cursor:      pointer;
  line-height: 1;
  padding:     4px;
}
.bl-share-popup-close:hover { color: var(--bl-text); }

/* ── Week bar ───────────────────────────────────────────────────────────── */

.bl-week-bar {
  display:         flex;
  flex-wrap:       nowrap;
  align-items:     flex-start;
  justify-content: center;
  gap:             4px;
  margin:          0 auto;
  cursor:          pointer;
  outline:         none;
  /* No overflow-x: auto — squares flex to fit, never clip */
}
.bl-week-bar:focus-visible {
  outline:        2px solid var(--bl-sage);
  outline-offset: 4px;
  border-radius:  10px;
}

.bl-week {
  flex:          1 1 0;
  min-width:     20px;
  max-width:     36px;
  aspect-ratio:  1;
  border-radius: 8px;
  box-sizing:    border-box;
  transition:    transform 120ms ease;
}
.bl-week.is-done   { background: var(--bl-sage); opacity: 0.65; }
.bl-week.is-now    { background: var(--bl-sage); border: 2px solid var(--bl-fern); transform: scale(1.08); }
.bl-week.is-coming { background: var(--bl-white); border: 1px solid var(--bl-rule); }

/* Headstart mode: wrap into two rows, fixed small squares */
.bl-week-bar.is-headstart {
  flex-wrap: wrap;
  padding:   0 6px;
}
.bl-week-bar.is-headstart .bl-week {
  flex:       0 0 22px;
  min-width:  22px;
  max-width:  22px;
  height:     22px;
  aspect-ratio: unset;
}

/* ── Days remaining tap target ─────────────────────────────────────────── */

.bl-days-remaining {
  display:     block;
  margin:      12px auto 0;
  background:  transparent;
  border:      none;
  color:       var(--bl-mist);
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   13px;
  cursor:      pointer;
  padding:     4px 0;
  text-align:  center;
}
.bl-days-remaining:hover { color: var(--bl-sage); }
.bl-days-remaining.is-showing {
  color:       var(--bl-clay);
  font-weight: 400;
}

/* ── Headstart offer ───────────────────────────────────────────────────── */

.bl-headstart-offer {
  display:     block;
  margin:      14px auto 0;
  background:  transparent;
  border:      1px dashed var(--bl-rule);
  border-radius: var(--bl-radius-sm);
  color:       var(--bl-sage);
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   13px;
  padding:     7px 16px;
  cursor:      pointer;
  transition:  border-color 120ms, color 120ms;
}
.bl-headstart-offer:hover {
  border-color: var(--bl-sage);
  color:        var(--bl-fern);
}

.bl-headstart-confirm {
  margin:        14px 0 0;
  padding:       14px 16px;
  background:    var(--bl-morning);
  border-radius: var(--bl-radius-sm);
}
.bl-headstart-confirm[hidden] { display: none; }
.bl-headstart-msg {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   14px;
  color:       var(--bl-text);
  margin:      0 0 12px;
}
.bl-headstart-actions { display: flex; gap: 10px; }

/* ── Sign-in nudge banner ──────────────────────────────────────────────── */

.bl-nudge {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         10px 14px;
  background:      var(--bl-morning);
  border-radius:   var(--bl-radius-sm);
  margin-bottom:   16px;
}
.bl-nudge[hidden] { display: none; }
.bl-nudge-text {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   13px;
  color:       var(--bl-text);
  flex:        1;
}
.bl-nudge-signin {
  background:    var(--bl-sage);
  color:         #fff;
  border:        none;
  border-radius: 6px;
  padding:       5px 12px;
  font-family:   'Jost', system-ui, sans-serif;
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  white-space:   nowrap;
}
.bl-nudge-signin:hover { background: var(--bl-fern); }
.bl-nudge-dismiss {
  background:  transparent;
  border:      none;
  color:       var(--bl-mist);
  font-size:   16px;
  cursor:      pointer;
  padding:     0;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Closed-season banner ─────────────────────────────────────────────── */

.bl-closed-banner {
  padding:        10px 14px;
  background:     var(--bl-morning);
  border-left:    4px solid var(--bl-sage);
  border-radius:  var(--bl-radius-sm);
  font-family:    'Jost', system-ui, sans-serif;
  font-weight:    500;
  font-size:      14px;
  color:          var(--bl-text);
  margin-bottom:  16px;
}
.bl-closed-banner[hidden] { display: none; }

body.bl-old-soul .bl-closed-banner { background: rgba(255,255,255,0.05); }

/* ── Season transition notice ─────────────────────────────────────────── */

.bl-transition-notice {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         10px 14px;
  background:      var(--bl-morning);
  border-radius:   var(--bl-radius-sm);
  margin-bottom:   16px;
}
.bl-transition-notice[hidden] { display: none; }
.bl-transition-text {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   13px;
  color:       var(--bl-text);
  flex:        1;
}
.bl-transition-dismiss {
  background:  transparent;
  border:      none;
  color:       var(--bl-mist);
  font-size:   16px;
  cursor:      pointer;
  padding:     0;
  line-height: 1;
  flex-shrink: 0;
}

body.bl-old-soul .bl-transition-notice { background: rgba(255,255,255,0.05); }

/* ── Forward picker (on-demand carry-forward) ──────────────────────────── */

.bl-forward-btn {
  display:       block;
  width:         100%;
  margin-bottom: 14px;
  background:    transparent;
  border:        1px dashed var(--bl-rule);
  border-radius: var(--bl-radius-sm);
  color:         var(--bl-sage);
  font-family:   'Jost', system-ui, sans-serif;
  font-weight:   300;
  font-size:     13px;
  padding:       9px 16px;
  cursor:        pointer;
  text-align:    left;
  transition:    border-color 120ms, color 120ms;
}
.bl-forward-btn[hidden] { display: none; }
.bl-forward-btn:hover { border-color: var(--bl-sage); color: var(--bl-fern); }

.bl-forward-overlay {
  position:        fixed;
  inset:           0;
  z-index:         1003;
  background:      rgba(46, 61, 58, 0.80);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         24px;
  box-sizing:      border-box;
}
.bl-forward-overlay[hidden] { display: none; }

.bl-forward-sheet {
  position:      relative;
  width:         100%;
  max-width:     440px;
  max-height:    calc(100vh - 48px);
  overflow-y:    auto;
  background:    var(--bl-white);
  border-radius: var(--bl-radius);
  padding:       28px 20px 24px;
  box-sizing:    border-box;
  transform:     scale(0.96);
  opacity:       0;
  transition:    transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease;
}
.bl-forward-overlay.is-open .bl-forward-sheet { transform: scale(1); opacity: 1; }

.bl-forward-close {
  position:    absolute;
  top:         14px;
  right:       14px;
  width:       32px;
  height:      32px;
  border:      none;
  background:  transparent;
  color:       var(--bl-mist);
  font-size:   18px;
  cursor:      pointer;
}
.bl-forward-close:hover { color: var(--bl-text); }

.bl-forward-label {
  font-family:   'Jost', system-ui, sans-serif;
  font-weight:   500;
  font-size:     12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:         var(--bl-sage);
  margin:        0 0 16px;
}

.bl-forward-source {
  font-family:   'Jost', system-ui, sans-serif;
  font-weight:   500;
  font-size:     11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color:         var(--bl-mist);
  margin:        14px 0 8px;
}
.bl-forward-source:first-child { margin-top: 0; }

.bl-forward-items {
  display:       flex;
  flex-direction: column;
  gap:           8px;
  margin-bottom: 18px;
}

/* Shared checkbox row (also used by forward picker) */
.bl-carryover-item {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.bl-carryover-item input[type="checkbox"] { accent-color: var(--bl-sage); }
.bl-carryover-item label {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   14px;
  color:       var(--bl-text);
  cursor:      pointer;
}
.bl-carryover-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Add item ───────────────────────────────────────────────────────────── */

.bl-add {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 16px;
}
.bl-add[hidden] { display: none; }

.bl-add-input {
  flex:          1;
  background:    var(--bl-off-white);
  border:        1px solid var(--bl-rule);
  border-radius: var(--bl-radius-sm);
  padding:       11px 14px;
  font-family:   'Jost', system-ui, sans-serif;
  font-weight:   300;
  font-size:     16px;
  color:         var(--bl-text);
  outline:       none;
  transition:    border-color 120ms;
}
.bl-add-input::placeholder { color: var(--bl-mist); }
.bl-add-input:focus { border-color: var(--bl-sage); }

.bl-add-btn {
  width:         38px;
  height:        38px;
  border-radius: 50%;
  border:        none;
  background:    var(--bl-sage);
  color:         #fff;
  font-size:     22px;
  line-height:   1;
  cursor:        pointer;
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background 120ms;
}
.bl-add-btn:hover { background: var(--bl-fern); }

/* ── Item cards ─────────────────────────────────────────────────────────── */

.bl-list {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.bl-item-row {
  position:   relative;
  clip-path:  inset(-6px 0 round var(--bl-radius-sm));
  transition: box-shadow 120ms;
}
.bl-item-row:hover { box-shadow: 0 2px 8px rgba(46,61,58,0.07); }

.bl-item-delete-reveal {
  position:        absolute;
  inset:           0;
  background:      var(--bl-clay);
  border:          none;
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  padding-right:   26px;
  color:           #fff;
  font-size:       18px;
  line-height:     1;
  cursor:          pointer;
  opacity:         0;
  z-index:         0;
  transition:      background 120ms;
}
.bl-item-delete-reveal:hover { background: #b86040; }

.bl-item-accent-reveal {
  position: absolute;
  inset:    0;
  opacity:  0;
  z-index:  0;
}
.bl-item-accent-reveal::after {
  content:       '';
  position:      absolute;
  left:          26px;
  top:           50%;
  width:         18px;
  height:        18px;
  margin-top:    -9px;
  border-radius: 50%;
  border:        2px solid rgba(255, 255, 255, 0.92);
}

.bl-item {
  position:                 relative;
  z-index:                  1;
  background:               #fff;
  border:                   1px solid var(--bl-rule);
  border-radius:            var(--bl-radius-sm);
  padding:                  12px 14px;
  cursor:                   pointer;
  touch-action:             pan-y;
  transition:               border-color 120ms;
  box-shadow:               0 1px 3px rgba(46, 61, 58, 0.10);
  user-select:              none;
  -webkit-user-select:      none;
  -webkit-touch-callout:    none;
  /* rotation + translateX applied inline via style.transform */
}
.bl-item:hover { border-color: var(--bl-mist); }
.bl-item.is-done { background: var(--bl-off-white); }

.bl-item-main {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
}

.bl-item-text {
  flex:        1;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 400;
  font-size:   15px;
  color:       var(--bl-text);
  line-height: 1.4;
}
.bl-item.is-done .bl-item-text {
  text-decoration: line-through;
  color:           var(--bl-mist);
}

/* Checkbox: tap to complete, tap to undo. */
.bl-item-check {
  flex-shrink:     0;
  width:           26px;
  height:          26px;
  margin-top:      1px;
  padding:         0;
  border:          2px solid var(--bl-mist);
  border-radius:   8px;
  background:      #fff;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background 140ms ease, border-color 140ms ease;
}
.bl-item-check:hover { border-color: var(--bl-sage); }
.bl-item-check:focus-visible {
  outline:        2px solid var(--bl-sage);
  outline-offset: 2px;
}
.bl-item-check-mark {
  color:      #fff;
  font-size:  15px;
  line-height: 1;
  opacity:    0;
  transform:  scale(0.4);
  transition: opacity 120ms ease, transform 120ms ease;
}
.bl-item.is-done .bl-item-check {
  background:    var(--bl-sage);
  border-color: var(--bl-sage);
}
.bl-item.is-done .bl-item-check-mark {
  opacity:   1;
  transform: scale(1);
}
.bl-item-check.is-popping { animation: bl-check-pop 280ms ease; }
@keyframes bl-check-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.bl-item-why-btn {
  flex-shrink:    0;
  width:          26px;
  height:         26px;
  border-radius:  50%;
  border:         none;
  background:     var(--bl-pollen);
  color:          var(--bl-text);
  font-size:      12px;
  line-height:    1;
  cursor:         default;  /* activated in Step 3 */
  opacity:        0.45;
  display:        flex;
  align-items:    center;
  justify-content: center;
  transition:     opacity 120ms;
}

.bl-item-why {
  font-family:  'Jost', system-ui, sans-serif;
  font-weight:  300;
  font-size:    13px;
  color:        var(--bl-sage);
  margin:       5px 0 0;
  line-height:  1.4;
}

.bl-item-expanded { padding-top: 12px; }
.bl-item-expanded[hidden] { display: none; }

.bl-item-note {
  display:       block;
  width:         100%;
  box-sizing:    border-box;
  background:    var(--bl-white);
  border:        1px solid var(--bl-rule);
  border-radius: var(--bl-radius-sm);
  padding:       9px 12px;
  font-family:   'Jost', system-ui, sans-serif;
  font-weight:   300;
  font-size:     14px;
  color:         var(--bl-text);
  resize:        vertical;
  min-height:    70px;
  outline:       none;
  transition:    border-color 120ms;
}
.bl-item-note:focus { border-color: var(--bl-sage); }
.bl-item-note::placeholder { color: var(--bl-mist); }

.bl-item-photo-label {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  margin-top:     8px;
  font-family:    'Jost', system-ui, sans-serif;
  font-weight:    300;
  font-size:      13px;
  color:          var(--bl-sage);
  cursor:         pointer;
}
.bl-item-photo-label:hover { color: var(--bl-fern); }
.bl-item-photo { display: none; }

/* Pin-birth animation for new items */
@keyframes bl-pin-birth {
  from { opacity: 0; transform: translateY(-8px) scale(0.92); }
  60%  { transform: translateY(2px) scale(1.02); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bl-pin-birth { animation: bl-pin-birth 220ms ease forwards; }

/* ── Welcome placeholder rows ───────────────────────────────────────────── */

.bl-empty { display: flex; flex-direction: column; gap: 10px; }
.bl-empty[hidden] { display: none; }

.bl-empty-row {
  height:        46px;
  border-radius: var(--bl-radius-sm);
  background:    var(--bl-off-white);
  border:        1px dashed var(--bl-rule);
  animation:     bl-welcome-jiggle 300ms ease forwards;
}
.bl-empty-row:nth-child(1) { animation-delay: 0ms; }
.bl-empty-row:nth-child(2) { animation-delay: 60ms; }
.bl-empty-row:nth-child(3) { animation-delay: 120ms; }
.bl-empty-row:nth-child(4) { animation-delay: 180ms; }
.bl-empty-row:nth-child(5) { animation-delay: 240ms; }

@keyframes bl-welcome-jiggle {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-3px); }
  40%  { transform: translateX(3px); }
  60%  { transform: translateX(-2px); }
  80%  { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

/* ── Full-screen day grid overlay ─────────────────────────────────────── */

.bl-daygrid-overlay {
  position:    fixed;
  inset:       0;
  z-index:     1000;
  background:  rgba(46, 61, 58, 0.96);
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     24px;
  box-sizing:  border-box;
}
.bl-daygrid-overlay[hidden] { display: none; }

.bl-daygrid-sheet {
  position:      relative;
  width:         100%;
  max-width:     560px;
  max-height:    calc(100vh - 48px);
  overflow-y:    auto;
  background:    var(--bl-white);
  border-radius: var(--bl-radius);
  padding:       24px;
  box-sizing:    border-box;
  transform:     scale(0.96);
  opacity:       0;
  transition:    transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease;
}
.bl-daygrid-overlay.is-open .bl-daygrid-sheet { transform: scale(1); opacity: 1; }

.bl-daygrid-close {
  position:    absolute;
  top:         14px;
  right:       14px;
  width:       32px;
  height:      32px;
  border:      none;
  background:  transparent;
  color:       var(--bl-sage);
  font-size:   18px;
  line-height: 1;
  cursor:      pointer;
}

.bl-daygrid-label {
  font-family:    'Jost', system-ui, sans-serif;
  font-weight:    500;
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--bl-sage);
  margin:         2px 0 4px;
  text-align:     center;
}

.bl-daygrid-count {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   14px;
  color:       var(--bl-text);
  margin:      0 0 4px;
  text-align:  center;
}

.bl-daygrid {
  display:               grid;
  grid-template-columns: repeat(10, 28px);
  gap:                   5px;
  padding:               16px 0 8px;
  justify-content:       center;
}

.bl-day {
  width:         28px;
  height:        28px;
  border-radius: 5px;
  box-sizing:    border-box;
}
.bl-day.is-done    { background: var(--bl-sage); opacity: 0.65; }
.bl-day.is-now     { background: var(--bl-sage); border: 2px solid var(--bl-fern); }
.bl-day.is-coming  { background: var(--bl-white); border: 1px solid var(--bl-rule); }
.bl-day.is-marked  { background: var(--bl-sage); opacity: 1; border: 2px solid var(--bl-fern); }

/* ── Season popup ─────────────────────────────────────────────────────── */

.bl-season-popup {
  position:    fixed;
  inset:       0;
  z-index:     1001;
  background:  rgba(46, 61, 58, 0.90);
  display:     flex;
  align-items: flex-end;
  justify-content: center;
}
.bl-season-popup[hidden] { display: none; }

.bl-season-popup-sheet {
  position:      relative;
  width:         100%;
  max-width:     440px;
  background:    var(--bl-white);
  border-radius: var(--bl-radius) var(--bl-radius) 0 0;
  padding:       36px 28px 40px;
  text-align:    center;
  box-sizing:    border-box;
  transform:     translateY(100%);
  transition:    transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bl-season-popup.is-open .bl-season-popup-sheet { transform: translateY(0); }

.bl-season-popup-text {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size:   28px;
  color:       var(--bl-text);
  margin:      0;
  line-height: 1.2;
}

.bl-season-popup-close {
  position:    absolute;
  top:         14px;
  right:       14px;
  width:       32px;
  height:      32px;
  border:      none;
  background:  transparent;
  color:       var(--bl-mist);
  font-size:   18px;
  cursor:      pointer;
}

/* ── Settings cog ─────────────────────────────────────────────────────── */

.bl-header { position: relative; }

.bl-settings-cog {
  position:    absolute;
  top:         0;
  right:       0;
  width:       32px;
  height:      32px;
  background:  transparent;
  border:      none;
  color:       var(--bl-mist);
  font-size:   18px;
  line-height: 1;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  color 120ms;
}
.bl-settings-cog:hover { color: var(--bl-sage); }

/* ── Why sharpener button (activated in Step 3) ────────────────────────── */

.bl-item-why-btn {
  cursor:  pointer;
  opacity: 0.7;
}
.bl-item-why-btn:hover { opacity: 1; }
.bl-item-why-btn:disabled { cursor: default; opacity: 0.45; }

/* Why sharpener bubble — fixed to viewport, appended to body */
.bl-why-bubble {
  position:      fixed;
  width:         300px;
  background:    #fff;
  border:        1px solid var(--bl-rule);
  border-radius: var(--bl-radius-sm);
  padding:       16px 20px;
  z-index:       2000;
  box-shadow:    0 8px 28px rgba(46,61,58,0.20);
  cursor:        pointer;
}
.bl-why-bubble-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style:  italic;
  font-weight: 400;
  font-size:   15px;
  color:       var(--bl-text);
  margin:      0;
  line-height: 1.4;
}
.bl-item-why-wrap {
  position: relative;
  flex-shrink: 0;
}

/* ── Memory capture ─────────────────────────────────────────────────────── */

.bl-capture-btn {
  display:        block;
  margin-top:     8px;
  background:     transparent;
  border:         none;
  color:          var(--bl-sage);
  font-family:    'Jost', system-ui, sans-serif;
  font-weight:    300;
  font-size:      13px;
  cursor:         pointer;
  padding:        0;
  text-align:     left;
  text-decoration: underline;
  text-decoration-color: var(--bl-mist);
}
.bl-capture-btn:hover { color: var(--bl-fern); }

.bl-memory-preview {
  margin-top:  8px;
  padding:     10px 12px;
  background:  var(--bl-morning);
  border-radius: var(--bl-radius-sm);
}
.bl-memory-preview-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style:  italic;
  font-weight: 400;
  font-size:   15px;
  color:       var(--bl-text);
  margin:      0 0 10px;
  line-height: 1.5;
}
.bl-memory-actions { display: flex; gap: 8px; }
.bl-memory-keep {
  background:    var(--bl-sage);
  color:         #fff;
  border:        none;
  border-radius: 6px;
  padding:       5px 12px;
  font-family:   'Jost', system-ui, sans-serif;
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
}
.bl-memory-keep:hover { background: var(--bl-fern); }
.bl-memory-edit {
  background:  transparent;
  border:      1px solid var(--bl-rule);
  border-radius: 6px;
  padding:     5px 12px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size:   13px;
  font-weight: 300;
  color:       var(--bl-sage);
  cursor:      pointer;
}
.bl-memory-edit:hover { border-color: var(--bl-sage); }

.bl-memory-edit-input {
  display:       block;
  width:         100%;
  box-sizing:    border-box;
  margin-top:    8px;
  background:    var(--bl-white);
  border:        1px solid var(--bl-rule);
  border-radius: var(--bl-radius-sm);
  padding:       8px 10px;
  font-family:   'Cormorant Garamond', Georgia, serif;
  font-style:    italic;
  font-size:     15px;
  color:         var(--bl-text);
  resize:        vertical;
  min-height:    60px;
  outline:       none;
}
.bl-memory-edit-input:focus { border-color: var(--bl-sage); }

.bl-memory-saved {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style:  italic;
  font-size:   15px;
  color:       var(--bl-sage);
  margin-top:  8px;
  line-height: 1.5;
}

/* ── Dice button ─────────────────────────────────────────────────────────── */

@keyframes bl-dice-roll {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(12deg); }
  50%  { transform: rotate(-10deg); }
  75%  { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}

.bl-dice-rolling {
  animation: bl-dice-roll 200ms ease-in-out infinite;
}

.bl-dice-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           52px;
  height:          52px;
  border-radius:   50%;
  border:          none;
  background:      var(--bl-pollen);
  color:           var(--bl-text);
  overflow:        hidden;
  cursor:          pointer;
  margin:          24px auto 0;
  transition:      transform 120ms ease, background 120ms ease;
  box-shadow:      0 2px 10px rgba(240, 204, 96, 0.45);
}
.bl-dice-btn:hover { transform: scale(1.07); }
.bl-dice-btn[hidden] { display: none; }

/* ── Dice overlay ────────────────────────────────────────────────────────── */

.bl-dice-overlay {
  position:        fixed;
  inset:           0;
  z-index:         1000;
  background:      rgba(244, 247, 245, 0.97);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         32px 24px;
  box-sizing:      border-box;
}
.bl-dice-overlay[hidden] { display: none; }

.bl-dice-sheet {
  position:   relative;
  width:      100%;
  max-width:  480px;
  text-align: center;
  transform:  scale(0.96);
  opacity:    0;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms ease;
}
.bl-dice-overlay.is-open .bl-dice-sheet { transform: scale(1); opacity: 1; }

.bl-dice-close {
  position:    absolute;
  top:         -28px;
  right:       0;
  width:       32px;
  height:      32px;
  border:      none;
  background:  transparent;
  color:       var(--bl-mist);
  font-size:   18px;
  line-height: 1;
  cursor:      pointer;
}
.bl-dice-close:hover { color: var(--bl-text); }

.bl-dice-graphic {
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 24px;
  width:           48px;
  height:          48px;
  color:           var(--bl-pollen);
}

.bl-dice-item-text {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size:   clamp(28px, 7vw, 42px);
  color:       var(--bl-text);
  margin:      0 0 16px;
  line-height: 1.15;
  min-height:  2.4em;
  display:     flex;
  align-items: center;
  justify-content: center;
}

.bl-dice-why-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style:  italic;
  font-size:   18px;
  color:       var(--bl-mist);
  margin:      0 0 36px;
  line-height: 1.4;
  min-height:  1.4em;
}

.bl-dice-actions {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             14px;
}

.bl-dice-go {
  background:    var(--bl-pollen);
  color:         var(--bl-text);
  border:        none;
  border-radius: var(--bl-radius-sm);
  padding:       12px 32px;
  font-family:   'Jost', system-ui, sans-serif;
  font-weight:   500;
  font-size:     16px;
  cursor:        pointer;
  transition:    transform 100ms;
}
.bl-dice-go:hover { transform: scale(1.03); }

.bl-dice-again {
  background:  transparent;
  border:      none;
  color:       var(--bl-mist);
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   13px;
  cursor:      pointer;
  padding:     4px 0;
}
.bl-dice-again:hover { color: var(--bl-text); }

.bl-dice-rally {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 600;
  font-size:   20px;
  color:       var(--bl-text);
  margin:      0 0 16px;
  animation:   bl-rally-in 180ms ease forwards;
}
@keyframes bl-rally-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Colour picker overlay ───────────────────────────────────────────────── */

.bl-colour-overlay {
  position:        fixed;
  inset:           0;
  z-index:         1001;
  background:      rgba(46, 61, 58, 0.80);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         24px;
  box-sizing:      border-box;
}
.bl-colour-overlay[hidden] { display: none; }

.bl-colour-sheet {
  position:      relative;
  width:         100%;
  max-width:     440px;
  max-height:    calc(100vh - 48px);
  overflow-y:    auto;
  background:    var(--bl-white);
  border-radius: var(--bl-radius);
  padding:       28px 20px 28px;
  box-sizing:    border-box;
  transform:     scale(0.96);
  opacity:       0;
  transition:    transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease;
}
.bl-colour-overlay.is-open .bl-colour-sheet { transform: scale(1); opacity: 1; }

.bl-colour-close {
  position:    absolute;
  top:         14px;
  right:       14px;
  width:       32px;
  height:      32px;
  border:      none;
  background:  transparent;
  color:       var(--bl-mist);
  font-size:   18px;
  cursor:      pointer;
}
.bl-colour-close:hover { color: var(--bl-text); }

.bl-colour-heading {
  font-family:    'Jost', system-ui, sans-serif;
  font-weight:    500;
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--bl-sage);
  margin:         0 0 16px;
}

.bl-colour-grid {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   8px;
  margin-bottom:         10px;
}

.bl-colour-deep-grid {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   8px;
  margin-bottom:         10px;
}
.bl-colour-deep-grid[hidden] { display: none; }

.bl-colour-swatch {
  aspect-ratio:  1;
  border-radius: 50%;
  cursor:        pointer;
  border:        2px solid transparent;
  transition:    transform 120ms, border-color 120ms;
  position:      relative;
}
.bl-colour-swatch:hover { transform: scale(1.15); }
.bl-colour-swatch.is-selected { border-color: var(--bl-text); }

.bl-colour-swatch-name {
  position:       absolute;
  bottom:         calc(100% + 6px);
  left:           50%;
  transform:      translateX(-50%);
  background:     var(--bl-text);
  color:          var(--bl-white);
  font-family:    'Jost', system-ui, sans-serif;
  font-weight:    400;
  font-size:      11px;
  white-space:    nowrap;
  padding:        4px 8px;
  border-radius:  4px;
  pointer-events: none;
  opacity:        0;
  transition:     opacity 120ms;
  z-index:        10;
}
.bl-colour-swatch:hover .bl-colour-swatch-name,
.bl-colour-swatch:focus .bl-colour-swatch-name,
.bl-colour-swatch.is-pending .bl-colour-swatch-name { opacity: 1; }

/* Confirm button (appears after pending colour selected) */
.bl-colour-confirm-btn {
  display:       block;
  width:         100%;
  margin-top:    20px;
  padding:       11px 0;
  background:    var(--bl-sage);
  color:         #fff;
  border:        none;
  border-radius: var(--bl-radius-sm);
  font-family:   'Jost', system-ui, sans-serif;
  font-weight:   500;
  font-size:     14px;
  cursor:        pointer;
  transition:    background 120ms;
}
.bl-colour-confirm-btn:hover { background: var(--bl-fern); }
.bl-colour-confirm-btn[hidden] { display: none; }

/* Settings separator + skin section */
.bl-settings-separator {
  border:        none;
  border-top:    1px solid var(--bl-rule);
  margin:        24px 0 20px;
}

/* Skin toggle inside settings sheet */
.bl-skin-toggle {
  display:       flex;
  width:         100%;
  border:        1px solid var(--bl-rule);
  border-radius: var(--bl-radius-sm);
  overflow:      hidden;
}

.bl-skin-opt {
  flex:        1;
  background:  transparent;
  border:      none;
  color:       var(--bl-mist);
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 400;
  font-size:   13px;
  padding:     10px 0;
  text-align:  center;
  cursor:      pointer;
  line-height: 1;
  transition:  background 150ms, color 150ms;
}

.bl-skin-opt.is-active {
  background: var(--bl-sage);
  color:      #fff;
  font-weight: 500;
}

.bl-colour-more {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0;
  width:                 36px;
  height:                36px;
  border-radius:         50%;
  overflow:              hidden;
  cursor:                pointer;
  border:                2px solid var(--bl-rule);
  margin:                0 0 10px;
  padding:               0;
  background:            transparent;
  transition:            border-color 120ms, transform 120ms;
}
.bl-colour-more:hover { border-color: var(--bl-sage); transform: scale(1.1); }
.bl-colour-more-slice {
  width:  100%;
  height: 100%;
}

.bl-colour-party-section {
  margin-top:  20px;
  padding-top: 18px;
  border-top:  1px solid var(--bl-rule);
}

.bl-colour-party-label {
  font-family:    'Jost', system-ui, sans-serif;
  font-weight:    500;
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--bl-clay);
  margin:         0 0 16px;
}

/* ── Reorder mode (long press to drag) ─────────────────────────────────────── */

@keyframes bl-wiggle {
  0%   { transform: rotate(-0.7deg); }
  50%  { transform: rotate(0.7deg); }
  100% { transform: rotate(-0.7deg); }
}

.bl-reorder-mode {
  user-select: none;
}

.bl-reorder-mode .bl-item-row:not(.is-grabbed) {
  animation: bl-wiggle 0.45s ease-in-out infinite;
  cursor:    grab;
}

.bl-reorder-mode .bl-item-row:nth-child(even):not(.is-grabbed) {
  animation-direction: reverse;
}

.bl-reorder-mode .bl-item-row.is-grabbed {
  animation:  none;
  opacity:    0.82;
  z-index:    10;
  box-shadow: 0 6px 22px rgba(46,61,58,0.18);
  cursor:     grabbing;
}

/* ── Step 4 ──────────────────────────────────────────────────────────────── */

/* Skin toggle */
.bl-skin-toggle {
  display:       flex;
  border:        1px solid var(--bl-rule);
  border-radius: 20px;
  overflow:      hidden;
}

.bl-skin-opt {
  background:  transparent;
  border:      none;
  color:       var(--bl-mist);
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 400;
  font-size:   15px;
  padding:     14px 10px;
  cursor:      pointer;
  line-height: 1;
  transition:  background 120ms, color 120ms;
}

.bl-skin-opt.is-active {
  background: var(--bl-sage);
  color:      #fff;
}

/* Tab bar */
.bl-tabs {
  display:         flex;
  gap:             0;
  border-bottom:   1px solid var(--bl-rule);
  margin-bottom:   20px;
}

.bl-tab {
  background:     transparent;
  border:         none;
  border-bottom:  2px solid transparent;
  color:          var(--bl-mist);
  font-family:    'Jost', system-ui, sans-serif;
  font-weight:    400;
  font-size:      13px;
  padding:        8px 14px 10px;
  cursor:         pointer;
  margin-bottom:  -1px;
  transition:     color 120ms, border-color 120ms;
  display:        flex;
  align-items:    center;
  gap:            5px;
}

.bl-tab.is-active {
  color:        var(--bl-text);
  border-color: var(--bl-sage);
}

.bl-tab[hidden] { display: none; }

.bl-tab-lock {
  font-size: 10px;
  opacity:   0.55;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms;
}

.bl-tab-lock.is-unlocking {
  transform: rotate(-30deg) scale(1.4);
  opacity:   1;
}

.bl-tab-lock.is-unlocked {
  display: none;
}

/* Remember button */
.bl-remember-btn {
  display:       block;
  width:         100%;
  margin:        24px 0 8px;
  background:    transparent;
  border:        1px solid var(--bl-rule);
  border-radius: var(--bl-radius-sm);
  color:         var(--bl-mist);
  font-family:   'Jost', system-ui, sans-serif;
  font-weight:   300;
  font-size:     13px;
  padding:       10px 14px;
  cursor:        pointer;
  text-align:    center;
  transition:    border-color 180ms, color 180ms, background 180ms;
}

.bl-remember-btn.has-done {
  border-color: var(--bl-sage);
  color:        var(--bl-sage);
}

.bl-remember-btn.has-done:hover {
  background: var(--bl-morning);
}

.bl-remember-btn[hidden] { display: none; }

/* Season summary overlay */
.bl-summary-overlay {
  position:        fixed;
  inset:           0;
  z-index:         1002;
  background:      rgba(46, 61, 58, 0.80);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         24px;
  box-sizing:      border-box;
}

.bl-summary-overlay[hidden] { display: none; }

.bl-summary-sheet {
  position:      relative;
  width:         100%;
  max-width:     480px;
  background:    var(--bl-white);
  border-radius: var(--bl-radius);
  padding:       36px 28px 36px;
  transform:     scale(0.96);
  opacity:       0;
  transition:    transform 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms ease;
}

.bl-summary-overlay.is-open .bl-summary-sheet {
  transform: scale(1);
  opacity:   1;
}

.bl-summary-close {
  position:   absolute;
  top:        14px;
  right:      14px;
  width:      32px;
  height:     32px;
  border:     none;
  background: transparent;
  color:      var(--bl-sage);
  font-size:  18px;
  cursor:     pointer;
}

.bl-summary-season {
  font-family:    'Jost', system-ui, sans-serif;
  font-weight:    500;
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--bl-sage);
  margin:         0 0 16px;
}

.bl-summary-headline {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size:   16px;
  color:       var(--bl-text);
  margin:      0 0 14px;
  min-height:  0;
}
.bl-summary-headline:empty { display: none; }

.bl-summary-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style:  italic;
  font-weight: 400;
  font-size:   20px;
  line-height: 1.55;
  color:       var(--bl-text);
  margin:      0;
}

/* Confetti */
@keyframes bl-confetti-burst {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(80vh) rotate(720deg); }
}

.bl-confetti-particle {
  position:        fixed;
  width:           8px;
  height:          8px;
  border-radius:   2px;
  pointer-events:  none;
  animation:       bl-confetti-burst 2s ease-out forwards;
}

/* ── Scrapbook panel ─────────────────────────────────────────────────────── */

.bl-scrapbook-panel {
  width: 100%;
}

.bl-scrapbook-panel[hidden] { display: none; }

.bl-scrapbook-locked-msg {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   14px;
  color:       var(--bl-mist);
  text-align:  center;
  padding:     40px 0;
  margin:      0;
}

.bl-scrapbook-cards {
  display:        flex;
  flex-direction: column;
  gap:            20px;
  padding-bottom: 40px;
}

/* Card — adapted from Signal's Here staff-card visual pattern */
.bl-scrapbook-card {
  background:    #fff;
  border-radius: var(--bl-radius-sm);
  box-shadow:    0 2px 12px rgba(46,61,58,0.10);
  overflow:      hidden;
  cursor:        pointer;
  transition:    box-shadow 150ms;
}

.bl-scrapbook-card:hover { box-shadow: 0 4px 20px rgba(46,61,58,0.15); }

body.bl-old-soul .bl-scrapbook-card { background: var(--bl-off-white); }

/* Coloured stamp strip at top of card — season colour */
.bl-scrapbook-stamp {
  height: 8px;
  width:  100%;
}

.bl-scrapbook-body {
  padding: 16px 18px 18px;
}

.bl-scrapbook-heading {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  margin-bottom:   10px;
}

.bl-scrapbook-season-name {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size:   18px;
  color:       var(--bl-text);
}

.bl-scrapbook-done-count {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   12px;
  color:       var(--bl-mist);
  margin:      0 0 12px;
}

.bl-card-icon {
  flex-shrink: 0;
  opacity:     0.55;
  line-height: 0;
}

.bl-scrapbook-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style:  italic;
  font-weight: 400;
  font-size:   16px;
  line-height: 1.45;
  color:       var(--bl-text);
  margin:      0 0 8px;
}

.bl-scrapbook-summary {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style:  italic;
  font-weight: 400;
  font-size:   16px;
  line-height: 1.5;
  color:       var(--bl-text);
  margin:      0 0 14px;
}

.bl-scrapbook-no-summary {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   13px;
  color:       var(--bl-mist);
  font-style:  italic;
  margin:      0 0 8px;
}

/* Memory line pins */
.bl-scrapbook-pins {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}

.bl-scrapbook-pin {
  display:       flex;
  align-items:   center;
  gap:           5px;
  font-family:   'Jost', system-ui, sans-serif;
  font-weight:   300;
  font-size:     12px;
  color:         var(--bl-text);
  background:    var(--bl-morning);
  border-radius: 20px;
  padding:       3px 10px 3px 7px;
}

body.bl-old-soul .bl-scrapbook-pin { background: rgba(255,255,255,0.07); }

.bl-scrapbook-pin-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  flex-shrink:   0;
}

/* Expanded items inside card */
.bl-scrapbook-items {
  margin-top:     14px;
  border-top:     1px solid var(--bl-rule);
  padding-top:    12px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.bl-scrapbook-item {
  font-family: 'Jost', system-ui, sans-serif;
  font-size:   14px;
  color:       var(--bl-text);
}

.bl-scrapbook-item-text {
  font-weight: 400;
  margin:      0 0 2px;
}

.bl-scrapbook-item-memory {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style:  italic;
  font-size:   14px;
  color:       var(--bl-mist);
  margin:      0;
}

/* ── Long-term panel ─────────────────────────────────────────────────────── */

.bl-longterm-panel[hidden] { display: none; }

.bl-longterm-years {
  display:         flex;
  flex-wrap:       wrap;
  gap:             5px;
  padding:         0 0 16px;
}

.bl-longterm-year {
  width:           44px;
  height:          28px;
  border-radius:   5px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     'Jost', system-ui, sans-serif;
  font-weight:     400;
  font-size:       11px;
  box-sizing:      border-box;
}

.bl-longterm-year.is-current {
  background: var(--bl-sage);
  color:      #fff;
}

.bl-longterm-year.is-within {
  background: var(--bl-morning);
  color:      var(--bl-text);
}

body.bl-old-soul .bl-longterm-year.is-within {
  background: rgba(255,255,255,0.07);
}

.bl-longterm-year.is-beyond {
  border:  1px solid var(--bl-rule);
  color:   var(--bl-mist);
  opacity: 0.4;
}

.bl-longterm-horizon {
  display:         flex;
  align-items:     center;
  gap:             12px;
  margin-bottom:   16px;
}

.bl-longterm-horizon-label {
  font-family:  'Jost', system-ui, sans-serif;
  font-weight:  300;
  font-size:    13px;
  color:        var(--bl-text);
  white-space:  nowrap;
  flex-shrink:  0;
}

.bl-longterm-slider {
  flex:               1;
  -webkit-appearance: none;
  appearance:         none;
  height:             3px;
  border-radius:      2px;
  background:         var(--bl-rule);
  outline:            none;
  cursor:             pointer;
}

.bl-longterm-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:              18px;
  height:             18px;
  border-radius:      50%;
  background:         var(--bl-sage);
  cursor:             pointer;
}

.bl-longterm-slider::-moz-range-thumb {
  width:        18px;
  height:       18px;
  border-radius: 50%;
  background:   var(--bl-sage);
  border:       none;
  cursor:       pointer;
}

.bl-longterm-full-msg {
  font-family:  'Jost', system-ui, sans-serif;
  font-weight:  300;
  font-size:    13px;
  color:        var(--bl-mist);
  margin:       0 0 12px;
  text-align:   center;
}

.bl-longterm-full-msg[hidden] { display: none; }

/* Long-term item: inherits .bl-item styles; add copy-to-season btn */
.bl-longterm-copy-btn {
  margin-top:     6px;
  background:     transparent;
  border:         none;
  color:          var(--bl-sage);
  font-family:    'Jost', system-ui, sans-serif;
  font-weight:    300;
  font-size:      12px;
  cursor:         pointer;
  padding:        0;
  text-decoration: underline;
  text-decoration-color: var(--bl-mist);
}

.bl-longterm-copy-btn:hover { color: var(--bl-fern); }

/* ── Section 5: Old Soul dice overlay overrides ──────────────────────────── */

body.bl-old-soul .bl-dice-overlay {
  background: rgba(29, 53, 44, 0.97);
}
body.bl-old-soul .bl-dice-item-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color:       #fff;
}
body.bl-old-soul .bl-dice-close { color: rgba(255,255,255,0.5); }
body.bl-old-soul .bl-dice-close:hover { color: #fff; }
body.bl-old-soul .bl-dice-again { color: rgba(255,255,255,0.65); }
body.bl-old-soul .bl-dice-again:hover { color: #fff; }

/* ── Section 6: 100-item cap message ─────────────────────────────────────── */

.bl-add-cap-msg {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   13px;
  color:       var(--bl-mist);
  margin:      -4px 0 14px;
  text-align:  center;
}
.bl-add-cap-msg[hidden] { display: none; }

/* ── Section 7: Inline sharpener (arrives and stays) ─────────────────────── */

.bl-sharpen-wrap {
  margin-top:  12px;
  padding-top: 10px;
  border-top:  1px solid var(--bl-rule);
}

.bl-sharpen-btn {
  background:        transparent;
  border:            none;
  color:             var(--bl-sage);
  font-family:       'Jost', system-ui, sans-serif;
  font-weight:       300;
  font-size:         13px;
  cursor:            pointer;
  padding:           0;
  text-align:        left;
  text-decoration:   underline;
  text-decoration-color: var(--bl-mist);
}
.bl-sharpen-btn:hover   { color: var(--bl-fern); }
.bl-sharpen-btn:disabled { color: var(--bl-mist); cursor: default; text-decoration: none; }

.bl-sharpen-reflection {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style:  italic;
  font-weight: 400;
  font-size:   16px;
  color:       var(--bl-text);
  margin:      0 0 8px;
  line-height: 1.5;
}

.bl-sharpen-controls {
  display: flex;
  gap:     14px;
}

.bl-sharpen-try-again,
.bl-sharpen-clear {
  background:      transparent;
  border:          none;
  color:           var(--bl-mist);
  font-family:     'Jost', system-ui, sans-serif;
  font-weight:     300;
  font-size:       12px;
  cursor:          pointer;
  padding:         0;
  text-decoration: underline;
  text-decoration-color: transparent;
}
.bl-sharpen-try-again:hover,
.bl-sharpen-clear:hover { color: var(--bl-text); }

/* ── Section 9: Season glyph ─────────────────────────────────────────────── */

.bl-season-label-group {
  display:     flex;
  align-items: center;
  gap:         5px;
}

.bl-season-glyph {
  font-size:   14px;
  line-height: 1;
}

/* ── Section 9: Seasonal tints (week squares + label; bg unchanged) ───────── */

body[data-bl-season="summer"] .bl-week.is-now,
body[data-bl-season="summer"] .bl-day.is-now  { background: var(--bl-pollen);  border-color: #c8a030; }

body[data-bl-season="autumn"] .bl-week.is-now,
body[data-bl-season="autumn"] .bl-day.is-now  { background: var(--bl-clay);    border-color: #9e6848; }

body[data-bl-season="winter"] .bl-week.is-now,
body[data-bl-season="winter"] .bl-day.is-now  { background: var(--bl-spark);   border-color: #5aa0c0; }

body[data-bl-season="summer"] .bl-season-label { color: #c8a030; }
body[data-bl-season="autumn"] .bl-season-label { color: var(--bl-clay); }
body[data-bl-season="winter"] .bl-season-label { color: var(--bl-spark); }

/* Old Soul: per-season is-now overrides (only accent changes, not background) */
body.bl-old-soul[data-bl-season="spring"] .bl-week.is-now,
body.bl-old-soul[data-bl-season="spring"] .bl-day.is-now  { background: var(--bl-sage);  border-color: var(--bl-fern); }

body.bl-old-soul[data-bl-season="summer"] .bl-week.is-now,
body.bl-old-soul[data-bl-season="summer"] .bl-day.is-now  { background: var(--bl-pollen); border-color: var(--bl-pollen); }

body.bl-old-soul[data-bl-season="autumn"] .bl-week.is-now,
body.bl-old-soul[data-bl-season="autumn"] .bl-day.is-now  { background: var(--bl-clay);   border-color: var(--bl-clay); }

body.bl-old-soul[data-bl-season="winter"] .bl-week.is-now,
body.bl-old-soul[data-bl-season="winter"] .bl-day.is-now  { background: var(--bl-spark);  border-color: var(--bl-spark); }

/* ── Section 9: Seesaw navigator ─────────────────────────────────────────── */

.bl-seesaw {
  margin-top: 10px;
  text-align: center;
}
.bl-seesaw[hidden] { display: none; }

.bl-seesaw-btn {
  background:  transparent;
  border:      none;
  color:       var(--bl-mist);
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size:   13px;
  cursor:      pointer;
  padding:     4px 0;
  transition:  color 120ms;
}
.bl-seesaw-btn:hover { color: var(--bl-sage); }

/* Next-season peek panel */
.bl-next-peek {
  margin-top:    12px;
  padding:       18px 16px;
  background:    var(--bl-morning);
  border-radius: var(--bl-radius-sm);
  text-align:    center;
}
.bl-next-peek[hidden] { display: none; }

.bl-next-peek-glyph {
  font-size:   28px;
  line-height: 1;
  margin:      0 0 6px;
}

.bl-next-peek-name {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 500;
  font-size:   14px;
  color:       var(--bl-text);
  margin:      0 0 14px;
  letter-spacing: 0.03em;
}

/* ── Fix 4: Why input for not-done items without a why ───────────────────── */

.bl-item-why-input {
  display:       block;
  width:         100%;
  box-sizing:    border-box;
  background:    transparent;
  border:        none;
  border-bottom: 1px solid var(--bl-rule);
  padding:       6px 0;
  font-family:   'Jost', system-ui, sans-serif;
  font-weight:   300;
  font-size:     13px;
  color:         var(--bl-text);
  resize:        none;
  outline:       none;
  line-height:   1.4;
  margin-top:    12px;
}
.bl-item-why-input::placeholder { color: var(--bl-mist); }
.bl-item-why-input:focus { border-bottom-color: var(--bl-sage); }

/* ── Fix 6: Note wrapper + wand capture icon ─────────────────────────────── */

.bl-note-wrap {
  position:   relative;
  margin-top: 10px;
}

.bl-memory-wand {
  position:    absolute;
  bottom:      6px;
  right:       6px;
  background:  transparent;
  border:      none;
  color:       var(--bl-mist);
  font-size:   28px;
  line-height: 1;
  cursor:      pointer;
  padding:     2px;
  transition:  color 120ms;
}
.bl-memory-wand:hover:not(:disabled) { color: var(--bl-sage); }
.bl-memory-wand.is-done { color: var(--bl-sage); opacity: 0.6; }
.bl-memory-wand:disabled { cursor: default; }

/* ── Desktop drag handle + hover actions ────────────────────────────────── */

.bl-item-desktop-ctrls {
  display:     none; /* hidden on touch */
  align-items: center;
  gap:         2px;
  flex-shrink: 0;
}

.bl-item-hover-highlight {
  width:         20px;
  height:        20px;
  border-radius: 50%;
  border:        1.5px solid var(--bl-mist);
  background:    transparent;
  cursor:        pointer;
  padding:       0;
  transition:    border-color 120ms, background 120ms;
}
.bl-item-hover-highlight:hover { border-color: var(--bl-sage); }

.bl-item-hover-delete {
  width:           20px;
  height:          20px;
  border-radius:   50%;
  border:          none;
  background:      transparent;
  color:           var(--bl-mist);
  font-size:       12px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0;
  transition:      color 120ms;
}
.bl-item-hover-delete:hover { color: var(--bl-clay); }

.bl-item-drag {
  width:           20px;
  height:          20px;
  background:      transparent;
  border:          none;
  color:           var(--bl-mist);
  cursor:          grab;
  padding:         0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       15px;
  line-height:     1;
  transition:      color 120ms;
}
.bl-item-drag:hover  { color: var(--bl-sage); }
.bl-item-drag:active { cursor: grabbing; }

@media (hover: hover) and (pointer: fine) {
  .bl-item-desktop-ctrls {
    display:    flex;
    opacity:    0;
    transition: opacity 120ms;
  }
  .bl-item:hover .bl-item-desktop-ctrls {
    opacity: 1;
  }
}