/* ========================================================================
   BEYOND CARE v148 — THE HOMEPAGE'S DETAIL, INSIDE THE PLATFORM
   Loaded last on platform.html (data-bc-scrapbook-detail), after
   scrapbook-platform-v147.css.

   v147 put the signed-in platform on the homepage's material, but it was
   still a simplified version of it: flat, untextured sheets, flat tan
   gradients for tape, blurred sprigs, and every page as one big sheet with
   nothing around it. The homepage stage (assets/home/v138/home-stage.webp)
   is full of small things: fibrous deckled paper, real kraft tape, steel
   paper clips, pressed flowers with their heads intact,
   and torn kraft and cream scraps tucked under each sheet.

   Those pieces are now cut out of the homepage artwork itself and kept in
   assets/platform/v148/:
     paper-*.webp     the v132 sheet shapes with paper grain, fibre streaks,
                      flecks and a darker torn rim
     tape-*.webp      kraft tape lifted from the homepage
     clip-*.webp      the homepage's paper clips
     sprig-*.webp     the homepage's pressed flowers
     scrap-*.webp     torn kraft and cream scraps for under the sheets
     simeon-portrait  the welcome portrait without the handwriting that
                      was baked into the old image

   The only markup change is the welcome portrait's image path. The accessibility flags
   still win: high contrast and forced colours remove all of it.
   ======================================================================== */

:root{
  --sb148-tape-a:url('./assets/platform/v148/tape-a.webp');
  --sb148-tape-d:url('./assets/platform/v148/tape-d.webp');
  --sb148-clip-a:url('./assets/platform/v148/clip-a.webp');
  --sb148-clip-b:url('./assets/platform/v148/clip-b.webp');
  --sb148-sprig-left:url('./assets/platform/v148/sprig-left.webp');
  --sb148-sprig-right:url('./assets/platform/v148/sprig-right.webp');
  --sb148-sprig-low:url('./assets/platform/v148/sprig-low.webp');
  --sb148-sprig-corner:url('./assets/platform/v148/sprig-corner.webp');
  --sb148-scrap-kraft:url('./assets/platform/v148/scrap-kraft.webp');
  --sb148-scrap-kraft-tall:url('./assets/platform/v148/scrap-kraft-tall.webp');
  --sb148-scrap-cream:url('./assets/platform/v148/scrap-cream.webp');
  --sb148-scrap-pale:url('./assets/platform/v148/scrap-pale.webp');

  /* 1. Textured paper everywhere v145/v147 paint a sheet. */
  --sb147-sheet-a:url('./assets/platform/v148/paper-card-a.webp');
  --sb147-sheet-b:url('./assets/platform/v148/paper-card-b.webp');
  --sb147-sheet-c:url('./assets/platform/v148/paper-card-c.webp');
  --sb147-sheet-wide-a:url('./assets/platform/v148/paper-sheet-wide-a.webp');
  --sb147-sheet-wide-b:url('./assets/platform/v148/paper-sheet-wide-b.webp');
  --sb147-sheet-tall-a:url('./assets/platform/v148/paper-sheet-tall-a.webp');
  --sb147-sheet-tall-b:url('./assets/platform/v148/paper-sheet-tall-b.webp');
  --sb147-note:url('./assets/platform/v148/paper-note-small.webp');
  --bc145-sheet-a:var(--sb147-sheet-a);
  --bc145-sheet-b:var(--sb147-sheet-b);
  --bc145-sheet-c:var(--sb147-sheet-c);
  --bc145-sheet-wide-a:var(--sb147-sheet-wide-a);
  --bc145-sheet-wide-b:var(--sb147-sheet-wide-b);
  --bc145-sheet-tall-a:var(--sb147-sheet-tall-a);
  --bc145-sheet-tall-b:var(--sb147-sheet-tall-b);
  --bc145-note:var(--sb147-note);
  /* v145 paints its tape with `background:var(--bc145-tape)`, so the real
     kraft strip drops straight in. */
  --bc145-tape:var(--sb148-tape-d) center/100% 100% no-repeat;
}

/* ------------------------------------------------------------------------
   2. PRESSED FLOWERS — crisp homepage sprigs at the window edges
   ------------------------------------------------------------------------ */
html body #appShell::before,
html body #appShell::after{
  -webkit-mask-image:none!important;
  mask-image:none!important;
  mix-blend-mode:normal!important;
  transform:none!important;
  opacity:.95;
}
html body #appShell::before{
  top:calc(var(--journey-nav-height,76px) + 30px);
  bottom:0;
  height:auto;
  width:130px;
  background:
    var(--sb148-sprig-left) left top/100px auto no-repeat,
    var(--sb148-sprig-corner) left bottom/96px auto no-repeat;
}
html body #appShell::after{
  top:calc(var(--journey-nav-height,76px) + 180px);
  bottom:0;
  height:auto;
  width:110px;
  background:var(--sb148-sprig-right) right 62%/96px auto no-repeat;
}

/* ------------------------------------------------------------------------
   3. SCRAPS UNDER EVERY SHEET — torn kraft and cream pieces tucked under
      the page sheet's corners, as on the homepage board. The layer spans
      the sheet's own width (see v147: the sheet's edges sit
      max(5.5vw, 50% - 780px) in from the main region) plus a margin.
   ------------------------------------------------------------------------ */
html body #mainContent:not(:empty)::before{
  content:'';
  position:absolute;
  z-index:-1;
  top:6px;
  bottom:20px;
  left:calc(max(5.5vw,50% - 780px) - 42px);
  right:calc(max(5.5vw,50% - 780px) - 38px);
  pointer-events:none;
  background:
    var(--sb148-scrap-kraft) left 0 top 0/300px auto no-repeat,
    var(--sb148-scrap-pale) left 120px top 4px/250px auto no-repeat,
    var(--sb148-scrap-kraft-tall) right 0 top 34%/118px auto no-repeat,
    var(--sb148-scrap-cream) right 30px bottom 0/340px auto no-repeat,
    var(--sb148-scrap-kraft) left 30px bottom 8%/260px auto no-repeat;
  filter:drop-shadow(0 4px 5px rgba(70,48,25,.12));
}

/* ------------------------------------------------------------------------
   4. TAPE AND CLIPS ON THE PAGE SHEET
   ------------------------------------------------------------------------ */
/* The sheet's top-left: the homepage's double strip of kraft tape. */
html body #mainContent > .screen.active::after,
html body .bc-page-leaf-main > .screen.active::after{
  top:-24px;
  left:4%;
  width:150px;
  height:77px;
  background:var(--sb148-tape-a) center/contain no-repeat;
  clip-path:none;
  box-shadow:none;
  transform:rotate(-3deg);
  mix-blend-mode:multiply;
}
/* The sheet's top-right: a single strip of tape with a paper clip on it. */
html body #mainContent:not(:empty)::after{
  top:4px;
  width:120px;
  height:76px;
  right:calc(max(5.5vw,50% - 780px) - 22px);
  clip-path:none;
  box-shadow:none;
  mix-blend-mode:multiply;
  background:
    var(--sb148-clip-a) right 44px top 0/32px auto no-repeat,
    var(--sb148-tape-d) right 0 top 22px/104px auto no-repeat;
  transform:rotate(8deg);
}
/* Pages whose hero artwork already carries its own clip keep just the tape. */
html body #mainContent:has(.learning-library-v122__visual,.journal-hero-v133,.resource-scrapbook-v123)::after{
  background:var(--sb148-tape-d) right 0 top 22px/104px auto no-repeat;
}

/* ------------------------------------------------------------------------
   5. COURSE CARDS — textured card paper, real tape
   ------------------------------------------------------------------------ */
html body #mainContent .journey-dashboard-v114 .course-paper-card-v63::before{
  top:-14px;
  width:76px;
  height:28px;
  background:var(--sb148-tape-d) center/100% 100% no-repeat;
  box-shadow:none;
}
html body #mainContent .journey-dashboard-v114 .course-paper-card-v63:nth-child(3n+2)::before{opacity:.9}
/* The Courses library draws its cards on ::before; give them the same
   textured papers the homepage cards use. */
body .learning-library-v131 .course-paper-card-v63:nth-child(3n+1)::before{background-image:var(--sb147-sheet-a)}
body .learning-library-v131 .course-paper-card-v63:nth-child(3n+2)::before{background-image:var(--sb147-sheet-b)}
body .learning-library-v131 .course-paper-card-v63:nth-child(3n)::before{background-image:var(--sb147-sheet-c)}
/* Courses not allocated to the learner stay clearly unavailable, but the
   paper itself remains a whole paper object on the sheet: only the
   writing and artwork on it fade. */
body .learning-library-v131 .course-paper-card-v63.is-unallocated{
  opacity:1!important;
  filter:none!important;
}
body .learning-library-v131 .course-paper-card-v63.is-unallocated > *{
  opacity:.5;
  filter:grayscale(.5);
}
body .learning-library-v131 .course-paper-card-v63::before,
body .learning-library-v131 .course-paper-card-v63.is-unallocated::before,
body .learning-library-v131 .course-paper-card-v63.is-unallocated:hover::before{
  filter:drop-shadow(0 2px 1px rgba(91,66,43,.10)) drop-shadow(0 10px 10px rgba(67,47,31,.15))!important;
}
/* Tape on the top of every third library card, as on the homepage row. */
body .learning-library-v131 .course-paper-card-v63::after{
  content:'';
  position:absolute;
  z-index:3;
  top:-12px;
  left:50%;
  width:74px;
  height:27px;
  translate:-50% 0;
  rotate:4deg;
  background:var(--sb148-tape-d) center/100% 100% no-repeat;
  mix-blend-mode:multiply;
  pointer-events:none;
}
body .learning-library-v131 .course-paper-card-v63:nth-child(2n)::after{left:24%;rotate:-6deg;scale:-1 1}
body .learning-library-v131 .course-paper-card-v63:nth-child(3n)::after{display:none}

/* ------------------------------------------------------------------------
   6. WELCOME SCREEN — clip on the pinned quote, signature above it, and
      the footer buttons kept inside their strip
   ------------------------------------------------------------------------ */
html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__quote::before{
  border:0!important;
  border-radius:0!important;
  top:-22px!important;
  width:30px!important;
  height:62px!important;
  background:var(--sb148-clip-b) center/contain no-repeat!important;
  transform:rotate(4deg)!important;
}
html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__signature{
  position:relative;
  z-index:8;
}
html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__courses{
  position:relative;
  z-index:7;
}
html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__footer{
  grid-template-columns:minmax(0,1fr) auto auto!important;
  background:transparent var(--sb147-sheet-c) center/100% 100% no-repeat!important;
  border:0!important;
  box-shadow:none!important;
  filter:var(--sb147-shadow);
  padding:16px 18px!important;
}
html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__progress{
  grid-template-columns:auto minmax(60px,1fr) auto!important;
}
html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__footer .bc63-btn{
  min-width:0!important;
  padding:0 20px!important;
  white-space:nowrap;
}
@media(min-width:1101px){
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__quote{
    left:138px!important;
    bottom:-22px!important;
    width:384px!important;
    min-height:112px!important;
    padding:24px 22px 22px 72px!important;
    font-size:22px!important;
  }
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__quote::before{left:26px!important}
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__quote::after{left:150px!important;width:120px!important;bottom:14px!important}
}

/* ------------------------------------------------------------------------
   7. SMALL SCREENS
   ------------------------------------------------------------------------ */
@media(max-width:1100px){
  html body #mainContent:not(:empty)::before{display:none}
}
@media(max-width:760px){
  html body #mainContent > .screen.active::after,
  html body .bc-page-leaf-main > .screen.active::after{top:-16px;width:104px;height:54px}
  body .learning-library-v131 .course-paper-card-v63::after{display:none}
}

/* ------------------------------------------------------------------------
   8. ACCESSIBILITY — the flags win over the decoration
   ------------------------------------------------------------------------ */
/* High contrast: no paper, tape or clip images anywhere on the platform. */
html body.a11y-high-contrast{
  --sb147-sheet-a:none;--sb147-sheet-b:none;--sb147-sheet-c:none;
  --sb147-sheet-wide-a:none;--sb147-sheet-wide-b:none;
  --sb147-sheet-tall-a:none;--sb147-sheet-tall-b:none;--sb147-note:none;
  --bc145-sheet-a:none;--bc145-sheet-b:none;--bc145-sheet-c:none;
  --bc145-sheet-wide-a:none;--bc145-sheet-wide-b:none;
  --bc145-sheet-tall-a:none;--bc145-sheet-tall-b:none;--bc145-note:none;
  --bc145-tape:none;
}
html body.a11y-high-contrast #mainContent::before,
html body.a11y-high-contrast .learning-library-v131 .course-paper-card-v63::after,
html body.a11y-high-contrast .journey-dashboard-v114__quote::before{display:none!important;content:none!important}
html body.a11y-high-contrast .learning-library-v131 .course-paper-card-v63.is-unallocated > *{opacity:.7;filter:none}
@media(forced-colors:active){
  html body #mainContent::before,
  body .learning-library-v131 .course-paper-card-v63::after{display:none}
}