/* ========================================================================
   BEYOND CARE v147 — THE LOCKED SCRAPBOOK DESIGN, INSIDE THE PLATFORM
   Loaded last on platform.html (data-bc-scrapbook-platform), after
   scrapbook-material-v145.css.

   Before this file the learner platform switched to a pale "diary paper"
   look the moment someone signed in: near-white sheets, pill buttons, a
   cream top bar and no board behind anything. The homepage (index.html and
   its approved stage artwork, assets/home/v138/home-stage.webp) and the
   sign-in screen sit on a pale mottled parchment board with dried-flower
   sprigs at the edges, near-white torn-paper sheets (assets/scrapbook-v132)
   held down with tan tape, torn-paper course cards, Vidaloka headlines,
   Caveat eyebrows and notes with a red hand-drawn rule, Georgia body copy
   and the red rectangular button. (The Courses page's darker tan collage
   board, assets/courses/v140/collage-bg.webp, is a different material and
   is deliberately not used here.)

   This file brings the signed-in platform onto the homepage's material
   without touching any markup, handler or page logic:

   1. Re-tokens the v145 material layer (colours, paper textures, tape,
      shadows) to the homepage values, so every sheet, ledger and overlay
      that v145 already paints simply changes material.
   2. Paints the parchment board (assets/platform/v147/board.webp) behind
      the whole app and pins the sprigs to the viewport edges.
   3. Makes every rendered page a torn-paper sheet on the board (a 9-slice
      border-image on the .screen wrapper's ::before, so the torn edge never
      stretches however tall the page gets, and the drop-shadow filter sits
      on the pseudo-element rather than on anything that holds fixed or
      sticky children).
   4. Restyles the top bar as the torn-paper header, and the buttons as the
      v146 red rectangle / ink-outlined secondary.
   5. Keeps the accessibility flags in charge: high contrast removes the
      board, sheets and sprigs; reduced motion removes the hover lift.
   ======================================================================== */

:root{
  /* The homepage's material: parchment board, near-white sheets, tan tape.
     Colours sampled from the approved homepage stage artwork; sheets are the
     v132 scans index.html composes its responsive layout from. */
  --sb147-board:#dfceb6;
  --sb147-board-img:url('./assets/platform/v147/board.webp');
  --sb147-board-bg:var(--sb147-board) var(--sb147-board-img) center top/1024px auto repeat;
  --sb147-paper:#f8f2e8;
  --sb147-header:#f7f1e6;
  --sb147-ink:#151210;
  --sb147-muted:#433b34;
  --sb147-red:#d7181f;
  --sb147-red-deep:#bf141a;
  --sb147-rule:rgba(51,39,30,.16);
  --sb147-sheet-a:url('./assets/scrapbook-v132/card-a.png');
  --sb147-sheet-b:url('./assets/scrapbook-v132/card-b.png');
  --sb147-sheet-c:url('./assets/scrapbook-v132/card-c.png');
  --sb147-sheet-wide-a:url('./assets/scrapbook-v132/sheet-wide-a.png');
  --sb147-sheet-wide-b:url('./assets/scrapbook-v132/sheet-wide-b.png');
  --sb147-sheet-tall-a:url('./assets/scrapbook-v132/sheet-tall-a.png');
  --sb147-sheet-tall-b:url('./assets/scrapbook-v132/sheet-tall-b.png');
  --sb147-note:url('./assets/scrapbook-v132/note-small.png');
  --sb147-sprig-left:url('./assets/courses/v140/sprig-left.webp');
  --sb147-sprig-right:url('./assets/courses/v140/sprig-right.webp');
  --sb147-serif:'Vidaloka',Georgia,'Times New Roman',serif;
  --sb147-body:Georgia,'Times New Roman',serif;
  --sb147-sans:'Inter',Arial,sans-serif;
  --sb147-hand:'Caveat','Segoe Print',cursive;
  --sb147-shadow:drop-shadow(0 7px 7px rgba(60,41,25,.14));
  --sb147-shadow-lift:drop-shadow(0 12px 12px rgba(58,39,23,.17));
  --sb147-tape:linear-gradient(180deg,rgba(201,163,112,.52),rgba(186,148,98,.46));

  /* 1. Re-token the v145 material layer. Every v145 rule reads these. */
  --bc145-paper:var(--sb147-paper);
  --bc145-paper-2:#fbf7ef;
  --bc145-paper-3:#efe6d8;
  --bc145-ink:var(--sb147-ink);
  --bc145-ink-2:#2e2823;
  --bc145-muted:var(--sb147-muted);
  --bc145-red:var(--sb147-red);
  --bc145-red-deep:var(--sb147-red-deep);
  --bc145-line:rgba(51,39,30,.22);
  --bc145-rule:var(--sb147-rule);
  --bc145-cover:#2a1d19;
  --bc145-cover-2:#3b2a24;
  --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);
  --bc145-shadow:var(--sb147-shadow);
  --bc145-shadow-soft:drop-shadow(0 4px 6px rgba(70,48,25,.14));
  --bc145-tape:var(--sb147-tape);
  --bc145-deckle:polygon(0 1.2%,1.2% 0,98.6% .4%,100% 1.9%,99.6% 98.1%,98.4% 100%,1.1% 99.4%,0 97.6%);

  /* The editorial layer's own paper token, so its canvas-coloured pieces
     (eyebrow rules, hairlines, swatches) agree with the board. */
  --bc63-paper:var(--sb147-paper);
}

/* ------------------------------------------------------------------------
   2. THE COLLAGE BOARD — behind the whole signed-in app
   ------------------------------------------------------------------------ */
/* The root stays transparent so the body background is the canvas; the
   sprigs below sit at z-index -1, which only paints above the canvas. */
html{background:transparent!important}
html body,html body.bc63-editorial{
  background:var(--sb147-board-bg)!important;
  color:var(--sb147-ink)!important;
  font-family:var(--sb147-body)!important;
  -webkit-font-smoothing:antialiased;
}
/* The editorial layer painted its cream canvas on the shell, the main
   region and the welcome screen as well as on body; the board shows
   through all of them now. */
html body #appShell,html body.bc63-editorial #appShell,
html body #appShell > .main,html body.bc63-editorial #appShell > .main,
html body #mainContent,html body.bc63-editorial #mainContent,
html body #screen-welcome,html body.bc63-editorial #screen-welcome,
html body .bc-page-leaf-main{
  background:transparent!important;
  box-shadow:none!important;
}
/* Dried-flower sprigs pinned to the edges of the window, under the sheets. */
html body #appShell::before,
html body #appShell::after{
  content:'';
  position:fixed;
  z-index:-1;
  top:calc(var(--journey-nav-height,76px) + 42px);
  width:96px;
  height:426px;
  pointer-events:none;
  mix-blend-mode:multiply;
  background:var(--sb147-sprig-left) center/100% 100% no-repeat;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);
  mask-image:radial-gradient(closest-side,#000 62%,transparent);
}
html body #appShell::before{left:0}
html body #appShell::after{
  right:0;
  width:92px;
  top:auto;
  bottom:28px;
  background-image:var(--sb147-sprig-right);
  transform:scaleX(-1) rotate(180deg);
}

/* ------------------------------------------------------------------------
   3. EVERY PAGE IS A TORN-PAPER SHEET ON THE BOARD
   .screen is the wrapper every route renders into (and that the cached
   lesson screens toggle), so the sheet lives on it rather than on the
   dozens of page roots. The 9-slice border-image keeps the torn edge at
   its drawn size no matter how tall the page is.
   ------------------------------------------------------------------------ */
html body #mainContent > .screen.active,
html body .bc-page-leaf-main > .screen.active{
  position:relative;
  isolation:isolate;
  width:min(calc(100% - 11vw),1560px);
  margin:30px auto 64px;
  padding:14px 0 26px;
}
html body #mainContent > .screen.active::before,
html body .bc-page-leaf-main > .screen.active::before{
  content:'';
  position:absolute;
  inset:-6px -10px -14px;
  z-index:-1;
  pointer-events:none;
  border:26px solid transparent;
  border-image:var(--sb147-sheet-wide-a) 42 fill / 26px / 0 round;
  filter:var(--sb147-shadow-lift);
  transform:rotate(-.18deg);
}
/* Alternate the sheet so consecutive pages do not read as the same scan. */
html body #mainContent[data-bc-shell="scrapbook"] > .screen.active::before{
  border-image-source:var(--sb147-sheet-wide-b);
  transform:rotate(.14deg);
}
/* The four pages that carry their own scrapbook compositions painted a
   cream wash edge to edge; on the sheet they only need the paper itself. */
html body .main[data-bc-shell="scrapbook"] .resource-scrapbook-v123{background:transparent!important}
html body .main[data-bc-shell="scrapbook"] :is(.reflection-shell,.services-page,.resource-scrapbook-v123)::before{opacity:.12}
/* Glass page shells inside the sheet stay transparent (v145 already does
   this for the paper shell; restate for both shells). */
html body .main[data-bc-shell] :is(.course-overview-page,.journey-page,.development-page,.account-page,.final-assessment-page,
  .admin-screen,.cms-shell,.accessibility-page,.accessibility-landing-page,.practitioner-shell,.resource-page,.lesson-content,
  .unit-page,.reflection-shell,.journey-dashboard-v63,.bcsc-page){
  background-color:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* ------------------------------------------------------------------------
   4. TYPOGRAPHY — Vidaloka headlines, Caveat eyebrows, Georgia copy
   ------------------------------------------------------------------------ */
html body #mainContent :is(p,li,dd,dt,blockquote,figcaption,.auth-subtitle,.intro):not(.notranslate){
  font-family:var(--sb147-body)!important;
}
/* Ledgers, forms, tables, menus and controls keep the UI sans. */
html body #mainContent :is(.admin-table,.report-table,.billing-history-v16,.cms-form-grid,.account-form,.service-form-grid,.resource-form-grid,
  .form-field,.preference-list,.bc-spread-footer,.journal-composer-v133,.admin-table-wrap,.report-table-wrap,.a11y-setting,.cms-shell,
  .platform-orgs-toolbar-v26,.resource-folder-list,.resource-breadcrumbs,.journey-admin-menu,nav,[role="tablist"],[role="menu"]) :is(p,li,dd,dt),
html body #mainContent :is(p,li,dd,dt)[class*="label"],
html body #mainContent :is(p,li,dd,dt)[class*="meta"],
html body #mainContent :is(p,li,dd,dt)[class*="pill"],
html body #mainContent :is(p,li,dd,dt)[class*="status"],
html body #mainContent :is(p,li,dd,dt)[class*="note"]{
  font-family:var(--sb147-sans)!important;
}
html body .main h1 em,html body .main h2 em,html body .main h1 .red,html body .main h2 .red{color:var(--sb147-red)}
/* The eyebrow rule and the hand-written notes use the locked red. */
html body .main :is(.welcome-eyebrow,.learning-eyebrow,.journal-eyebrow-v133,.course-overview-kicker-v38,.course-section-kicker-v38)::after,
html body .main[data-bc-shell="scrapbook"] :is(.welcome-eyebrow,.journal-eyebrow-v133,.learning-eyebrow)::after{background:var(--sb147-red)!important}

/* ------------------------------------------------------------------------
   5. TOP BAR — the torn-paper header from the public pages
   ------------------------------------------------------------------------ */
html body:not(.a11y-high-contrast) .journey-nav{
  background:var(--sb147-header)!important;
  background-image:none!important;
  color:var(--sb147-ink)!important;
  border-bottom:0!important;
  box-shadow:0 1px 0 rgba(72,50,31,.10),0 5px 16px rgba(63,43,25,.05)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
/* The torn bottom edge is the bottom of the same near-white sheet the
   homepage header uses (index.html .header::after). */
html body:not(.a11y-high-contrast) .journey-nav::after{
  content:''!important;
  position:absolute!important;
  left:0!important;right:0!important;
  top:100%!important;bottom:auto!important;
  height:14px!important;
  background:var(--sb147-sheet-wide-a) center 100%/100% 42px no-repeat!important;
  filter:drop-shadow(0 3px 3px rgba(70,48,25,.16))!important;
  pointer-events:none;
}
html body:not(.a11y-high-contrast) .journey-brand strong{
  font:400 30px/1 var(--sb147-serif)!important;
  letter-spacing:-.025em!important;
  text-transform:none!important;
  color:var(--sb147-ink)!important;
}
html body:not(.a11y-high-contrast) .journey-brand strong::after{background:var(--sb147-red)!important}
html body:not(.a11y-high-contrast) .journey-brand span{color:var(--sb147-red)!important}
html body:not(.a11y-high-contrast) .journey-link{
  font:400 15px/1 var(--sb147-serif)!important;
  letter-spacing:0!important;
  color:var(--sb147-ink)!important;
}
html body:not(.a11y-high-contrast) .journey-link:hover,
html body:not(.a11y-high-contrast) .journey-link.active{color:var(--sb147-red)!important}
html body:not(.a11y-high-contrast) .journey-link::after{background:var(--sb147-red)!important;height:1.5px!important}
html body:not(.a11y-high-contrast) :is(.journey-account,.journey-profile-v114,.journey-search-v114){color:var(--sb147-ink)!important}
html body:not(.a11y-high-contrast) .journey-profile-v114 :is(small,strong){color:var(--sb147-ink)!important}
html body:not(.a11y-high-contrast) .journey-profile-v114 small{color:var(--sb147-muted)!important}
html body:not(.a11y-high-contrast) .journey-admin-edit{
  border:1.5px solid #2b2520!important;
  background:rgba(250,245,236,.5)!important;
  border-radius:2px!important;
  color:var(--sb147-ink)!important;
  font-family:var(--sb147-serif)!important;
}
html body .journey-admin-menu{
  background:var(--sb147-paper) var(--sb147-sheet-tall-a) center/100% 100% no-repeat!important;
  filter:var(--sb147-shadow)!important;
}
/* Mobile bars share the header paper. */
html body:not(.a11y-high-contrast) :is(.bc-mobile-top,.bc-mobile-bottom){
  background:var(--sb147-header)!important;
  color:var(--sb147-ink)!important;
  border-color:rgba(51,39,30,.22)!important;
}
html body:not(.a11y-high-contrast) :is(.bc-mobile-brand strong,.bc-mobile-menu-button,.bc-mobile-bottom button){color:var(--sb147-ink)!important}
html body:not(.a11y-high-contrast) .bc-mobile-brand span{color:var(--sb147-red)!important}
html body:not(.a11y-high-contrast) .bc-mobile-bottom button.active{color:var(--sb147-red)!important}

/* ------------------------------------------------------------------------
   6. BUTTONS — the red rectangle and the ink-outlined secondary
   ------------------------------------------------------------------------ */
html body #mainContent :is(.btn-admin-primary,.bc-action.primary,.bc-action:not(.secondary),.course-overview-progress-v38__primary,
  .course-final-v38__button:not(.is-locked),.btn-start,.development-next-action,.managed-button.primary,.btn-resume,.btn-submit,
  .btn-next,.service-primary,.bc-primary-action,.btn-send-results,.certificate-action,.unit-complete-btn,.btn-ejs-save),
html body .unit-overlay :is(.bc-primary-action,.btn-submit,.bc-diary-next,.bc-spread-next),
html body .modal-card :is(.btn-admin-primary,.bc-action:not(.secondary)){
  background:var(--sb147-red)!important;
  color:#fff!important;
  border:0!important;
  border-radius:2px!important;
  font-family:var(--sb147-serif)!important;
  font-weight:400!important;
  letter-spacing:0!important;
  box-shadow:0 3px 8px rgba(120,20,20,.18)!important;
  text-transform:none!important;
}
html body #mainContent :is(.btn-admin-primary,.bc-action.primary,.bc-action:not(.secondary),.btn-start,.btn-resume,.btn-submit,.btn-next,.service-primary,.bc-primary-action):hover,
html body .unit-overlay :is(.bc-primary-action,.btn-submit,.bc-diary-next,.bc-spread-next):hover{
  background:var(--sb147-red-deep)!important;
}
html body #mainContent .unit-complete-btn.done{background:#1e6b45!important}
html body #mainContent :is(.bc-action.secondary,.btn-secondary,.btn-admin-secondary,.managed-button.secondary,.managed-button.outline,
  .course-overview-progress-v38__details,.bc-secondary-action,.btn-prev,.btn-back),
html body .unit-overlay :is(.bc-secondary-action,.unit-overlay-close,.bc-diary-back,.pr-back,.bc-diary-prev,.bc-spread-prev){
  background:rgba(250,245,236,.55)!important;
  border:1.5px solid #2b2520!important;
  border-radius:2px!important;
  color:#1d1916!important;
  font-family:var(--sb147-serif)!important;
  font-weight:400!important;
  letter-spacing:0!important;
  box-shadow:none!important;
}
html body #mainContent :is(.bc-action.secondary,.btn-secondary,.btn-admin-secondary,.managed-button.secondary,.managed-button.outline,.bc-secondary-action):hover{
  background:rgba(250,245,236,.95)!important;
}
/* Pills and chips on the sheets use the locked red ink. */
html body #mainContent :is(.coming-pill,.status-pill,.assessment-status-pill,.journal-badge){
  border:1.5px solid var(--sb147-red)!important;
  border-radius:4px!important;
  background:rgba(255,252,245,.4)!important;
  color:var(--sb147-red)!important;
  font:600 13px/1 var(--sb147-hand)!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
html body #mainContent .journey-card-icon{background:rgba(255,252,245,.5)!important;border:1.5px solid rgba(215,24,31,.6)!important;border-radius:4px!important}

/* ------------------------------------------------------------------------
   7. SHEETS — the v145 cards already take the (re-tokened) torn paper;
      give them the v146 shadow and tilt and a slightly firmer edge.
   ------------------------------------------------------------------------ */
html body .main[data-bc-shell="paper"] :is(.journey-card,.kpi-card,.portal-summary-card,.service-card,.practitioner-card,
  .accessibility-card,.news-card,.upcoming-card,.attention-card,.development-card,.quick-action,.billing-card,
  .account-card,.live-card,.community-card,.connect-card,.development-stage-card,.unit-card,.plan-card,.priority-card,
  .platform-org-card-v26,.course-focus-card-v38,.dev-milestone,.coaching-card,.cqc-card):hover{
  filter:var(--sb147-shadow-lift);
}
/* The full-width first card of a three-card journey grid kept a glass
   gradient and 26px corners from the premium layer; it is a sheet too. */
html body #mainContent .journey-card-grid > .journey-card:first-child{
  background:var(--bc145-paper-2) var(--sb147-sheet-b) center/100% 100% no-repeat!important;
  border-radius:2px!important;
  border:0!important;
  box-shadow:none!important;
}
/* Accessibility landing: the hero button and the four feature tiles. */
html body #mainContent .accessibility-landing-cta{
  background:var(--sb147-red)!important;
  color:#fff!important;
  border:0!important;
  border-radius:2px!important;
  font-family:var(--sb147-serif)!important;
  font-weight:400!important;
  box-shadow:0 3px 8px rgba(120,20,20,.18)!important;
}
html body #mainContent .accessibility-landing-cta:hover{background:var(--sb147-red-deep)!important}
html body #mainContent .accessibility-landing-feature{
  position:relative;
  background:var(--bc145-paper-2) var(--sb147-sheet-a) center/100% 100% no-repeat!important;
  border:0!important;
  border-radius:2px!important;
  box-shadow:none!important;
  filter:var(--sb147-shadow);
  isolation:isolate;
}
html body #mainContent .accessibility-landing-feature:nth-child(3n+2){background-image:var(--sb147-sheet-b)!important}
html body #mainContent .accessibility-landing-feature:nth-child(3n){background-image:var(--sb147-sheet-c)!important}
html body #mainContent .accessibility-landing-feature:nth-child(odd){rotate:-.35deg}
html body #mainContent .accessibility-landing-feature:nth-child(even){rotate:.35deg}
html body #mainContent .accessibility-landing-feature-icon{background:rgba(255,252,245,.5)!important;border:1.5px solid rgba(215,24,31,.6)!important;border-radius:4px!important}
/* Forms and tables: the ledger's red margin line becomes the locked red. */
html body .main[data-bc-shell="paper"] :is(.cms-form-grid,.account-form,.service-form-grid,.resource-form-grid,.portfolio-section,.a11y-setting,
  .reflection-step,.quiz-paste-card,.lesson-import-card,.platform-orgs-toolbar-v26,.referral-template-sections){
  box-shadow:inset 26px 0 0 var(--bc145-paper-2),inset 27px 0 0 rgba(215,24,31,.55),0 1px 0 rgba(255,255,255,.7) inset,0 12px 24px -16px rgba(50,36,24,.35)!important;
}
html body .main[data-bc-shell="paper"] :is(.admin-table-wrap,.report-table-wrap,.billing-history-section-v16){
  box-shadow:inset 10px 0 0 var(--bc145-paper-2),inset 11px 0 0 rgba(215,24,31,.5),0 1px 0 rgba(255,255,255,.7) inset,0 14px 28px -16px rgba(50,36,24,.35)!important;
}
/* Inputs: the v146 field — a hairline box on paper rather than an underline. */
html body .main[data-bc-shell="paper"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea:not(.cms-rich-editor)){
  border:1px solid rgba(55,43,33,.28)!important;
  border-radius:2px!important;
  background-color:rgba(255,252,245,.62)!important;
  font-family:var(--sb147-sans)!important;
}
html body .main[data-bc-shell="paper"] :is(input,select,textarea):focus{
  border-color:var(--sb147-red)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(215,24,31,.14)!important;
}
/* The lesson footer and submit bar float on the sheet as a paper strip. */
html body .main[data-bc-shell="paper"] :is(.lesson-footer,.final-submit-bar){
  background:var(--sb147-header) var(--sb147-sheet-c) center/100% 100% no-repeat!important;
  border:0!important;
  box-shadow:0 -8px 20px -14px rgba(50,36,24,.35)!important;
}

/* ------------------------------------------------------------------------
   8. OVERLAYS AND MODALS — the same board behind, sheets on top
   ------------------------------------------------------------------------ */
html body .unit-overlay{
  background:var(--sb147-board-bg)!important;
}
html body :is(.unit-overlay-bar,.bc-stage-overlay-bar,.bc-diary-toolbar,.pr-header){
  background:var(--sb147-header)!important;
  border-bottom:0!important;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 18px -12px rgba(70,48,25,.35)!important;
}
html body .unit-overlay .unit-overlay-scroll > *,
html body .unit-overlay > :not(.unit-overlay-bar):not(.bc-stage-overlay-bar):not(.unit-overlay-scroll){position:relative}
html body .modal-backdrop,html body .modal-overlay{background:rgba(21,18,16,.62)!important}
html body :is(.modal-card,.modal,.dialog){
  background:var(--sb147-paper) var(--sb147-sheet-b) center/100% 100% no-repeat!important;
  clip-path:none!important;
  box-shadow:0 30px 70px rgba(0,0,0,.4)!important;
}

/* ------------------------------------------------------------------------
   8b. THE HOMEPAGE MATERIAL — pale parchment board, near-white sheets, tape
   The first pass of this file borrowed the darker tan collage board and
   tan card papers from the Courses page. The homepage (index.html and its
   approved stage artwork) sits on a pale mottled parchment with near-white
   torn sheets, tan tape at the sheet edges and torn-paper course cards, so
   the tokens above now point at that material and the pieces below add
   what the homepage has that the platform lacked.
   ------------------------------------------------------------------------ */
/* Tape at the top-left of every page sheet. */
html body #mainContent > .screen.active::after,
html body .bc-page-leaf-main > .screen.active::after{
  content:'';
  position:absolute;
  z-index:5;
  top:-16px;
  left:5%;
  width:118px;
  height:30px;
  background:var(--sb147-tape);
  clip-path:polygon(0 8%,6% 0,14% 10%,22% 2%,100% 0,95% 18%,100% 34%,94% 52%,100% 70%,96% 86%,100% 100%,10% 96%,0 100%,5% 78%,0 60%,6% 40%,0 22%);
  transform:rotate(-6deg);
  mix-blend-mode:multiply;
  box-shadow:0 2px 5px rgba(57,43,31,.10);
  pointer-events:none;
}
/* A second strip on the sheet's top-right corner. The sheet is centred at
   min(100% - 11vw, 1560px) wide, so its right edge sits max(5.5vw, 50% - 780px)
   in from the main region's edge. */
html body #mainContent:not(:empty)::after{
  content:'';
  position:absolute;
  z-index:5;
  top:18px;
  right:calc(max(5.5vw,50% - 780px) - 26px);
  width:96px;
  height:28px;
  background:var(--sb147-tape);
  clip-path:polygon(0 8%,6% 0,14% 10%,22% 2%,100% 0,95% 18%,100% 34%,94% 52%,100% 70%,96% 86%,100% 100%,10% 96%,0 100%,5% 78%,0 60%,6% 40%,0 22%);
  transform:rotate(9deg);
  mix-blend-mode:multiply;
  box-shadow:0 2px 5px rgba(57,43,31,.10);
  pointer-events:none;
}
/* The welcome screen's nine course tiles become the homepage's torn-paper
   course cards: card paper, drop shadow, slight tilt, tape at the top. */
html body #mainContent .journey-dashboard-v114 .course-paper-card-v63{
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  background:var(--bc145-paper-2) var(--sb147-sheet-a) center/100% 100% no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 8px 8px rgba(55,37,22,.14));
  rotate:-.6deg;
  transition:transform .18s ease,filter .18s ease!important;
}
html body #mainContent .journey-dashboard-v114 .course-paper-card-v63:nth-child(3n+2){background-image:var(--sb147-sheet-b)!important;rotate:.35deg}
html body #mainContent .journey-dashboard-v114 .course-paper-card-v63:nth-child(3n){background-image:var(--sb147-sheet-c)!important;rotate:-.25deg}
html body #mainContent .journey-dashboard-v114 .course-paper-card-v63:hover{
  transform:translateY(-3px)!important;
  filter:drop-shadow(0 15px 20px rgba(57,43,31,.13));
}
html body #mainContent .journey-dashboard-v114 .course-paper-card-v63::before{
  content:'';
  position:absolute;
  z-index:6;
  top:-9px;
  left:50%;
  width:68px;
  height:22px;
  background:var(--sb147-tape);
  transform:translateX(-50%) rotate(5deg);
  mix-blend-mode:multiply;
  box-shadow:0 2px 5px rgba(57,43,31,.09);
  pointer-events:none;
}
html body #mainContent .journey-dashboard-v114 .course-paper-card-v63:nth-child(3n+2)::before{left:28%;transform:translateX(-50%) rotate(-5deg);opacity:.75}
html body #mainContent .journey-dashboard-v114 .course-paper-card-v63:nth-child(3n)::before{left:auto;right:18px;transform:rotate(6deg)}
html body #mainContent .journey-dashboard-v114 .course-paper-card-v63 .course-paper-card-v63__dot{background:#ddd6cc!important}
/* The handwritten quote card and the progress footer on the welcome screen. */
html body #mainContent .journey-dashboard-v114 .journey-dashboard-v63__note{
  background:var(--bc145-paper-2) var(--sb147-note) center/100% 100% no-repeat!important;
  border:0!important;
  box-shadow:none!important;
  filter:var(--sb147-shadow);
}
html body #mainContent .journey-dashboard-v114 .journey-dashboard-v63__footer{background:transparent!important}
/* The pinned quote beneath the portrait: the homepage's handwritten note paper. */
html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__quote{
  background:var(--bc145-paper-2) var(--sb147-note) center/100% 100% no-repeat!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:var(--sb147-shadow);
  font-family:var(--sb147-hand)!important;
}
html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__quote span{font-family:var(--sb147-hand)!important}
/* Scrapbook-shell pages (Courses, My Journal, Resource Studio, Events) that
   paint their own cream wash sit on the sheet; the wash is the sheet now. */
html body .main[data-bc-shell="scrapbook"] :is(.learning-library-v63,.learning-library-v131,.journey-dashboard-v63){background:transparent!important}

/* ------------------------------------------------------------------------
   9. SMALL SCREENS
   ------------------------------------------------------------------------ */
@media(max-width:1100px){
  html body #appShell::before,html body #appShell::after{display:none}
}
@media(max-width:760px){
  html body .journey-card-grid{grid-template-columns:1fr!important}
  html body #mainContent > .screen.active,
  html body .bc-page-leaf-main > .screen.active{
    width:calc(100% - 16px);
    margin:14px auto 40px;
    padding:8px 0 16px;
  }
  html body #mainContent > .screen.active::before,
  html body .bc-page-leaf-main > .screen.active::before{
    inset:-4px -6px -8px;
    border-width:18px;
    border-image-width:18px;
  }
  html body #mainContent > .screen.active::after,
  html body .bc-page-leaf-main > .screen.active::after{top:-12px;width:84px;height:24px}
  html body #mainContent:not(:empty)::after{display:none}
  html body #mainContent .journey-dashboard-v114 .course-paper-card-v63{rotate:0deg;min-height:240px!important}
  /* On phones the three-line titles ran into the artwork; the art sits
     under the title instead. */
  html body #mainContent .journey-dashboard-v114 .course-paper-card-v63__art{top:auto!important;bottom:34px!important;height:50px!important}
}

/* ------------------------------------------------------------------------
   10. ACCESSIBILITY — the flags win over the decoration
   ------------------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  html body #mainContent > .screen.active::before,
  html body .bc-page-leaf-main > .screen.active::before{transform:none}
  html body #mainContent .journey-dashboard-v114 .course-paper-card-v63{rotate:0deg;transition:none!important}
}
html body.a11y-reduce-motion #mainContent > .screen.active::before{transform:none}
html body.a11y-reduce-motion #mainContent .journey-dashboard-v114 .course-paper-card-v63{rotate:0deg;transition:none!important}
html body.a11y-high-contrast,
html body.a11y-high-contrast #appShell > .main,
html body.a11y-high-contrast .unit-overlay{
  background:#fff!important;
  color:#000!important;
}
html body.a11y-high-contrast #appShell::before,
html body.a11y-high-contrast #appShell::after,
html body.a11y-high-contrast #mainContent > .screen.active::before,
html body.a11y-high-contrast .bc-page-leaf-main > .screen.active::before,
html body.a11y-high-contrast #mainContent > .screen.active::after,
html body.a11y-high-contrast .bc-page-leaf-main > .screen.active::after,
html body.a11y-high-contrast #mainContent::after,
html body.a11y-high-contrast .journey-dashboard-v114 .course-paper-card-v63::before{display:none!important;content:none!important}
html body.a11y-high-contrast .journey-dashboard-v114 .course-paper-card-v63{filter:none;rotate:0deg;background:#fff!important;border:2px solid #000!important}
html body.a11y-high-contrast #mainContent > .screen.active{width:auto;margin:0;padding:0}
html body.a11y-high-contrast .journey-nav::after{display:none!important}
html body.a11y-high-contrast .main :is(.btn-admin-primary,.bc-action:not(.secondary),.btn-start,.btn-resume,.btn-submit){
  background:#000!important;color:#fff!important;border:2px solid #000!important;box-shadow:none!important;
}
html body.a11y-high-contrast .main :is(.bc-action.secondary,.btn-secondary,.btn-admin-secondary){
  background:#fff!important;color:#000!important;border:2px solid #000!important;
}
@media(forced-colors:active){
  html body #appShell::before,html body #appShell::after,
  html body #mainContent > .screen.active::before,
  html body #mainContent > .screen.active::after,
  html body #mainContent::after{display:none}
}