/* BBBS shared visual language — follows the warm portal without erasing board artwork. */
:root {
  --bbbs-surface: #fffdf8;
  --bbbs-paper: #fff9f0;
  --bbbs-rail: #343d56;
  --bbbs-ink: #343949;
  --bbbs-muted: #777c87;
  --bbbs-line: #e9e0d2;
  --bbbs-gold: #e7b44b;
}
@media (min-width: 721px) {
  /* Keep reader, fixed entry pages and community tools in the same compact shell. */
  body:not([data-layout="portal"]) #app-shell.shell {
    box-sizing: border-box;
    display: grid;
    max-width: 1680px;
    align-items: start;
    gap: 10px;
    margin: 10px auto 0;
    padding: 9px;
    border: 1px solid #fffaf0db;
    border-radius: 19px;
    background: #fff9f0ad;
    box-shadow: 0 8px 30px #403d3410;
  }
  body:not([data-layout="portal"]) #app-shell > .col-main { min-width: 0; padding: 0; background: transparent; }
  body:not([data-layout="portal"]) #app-shell #community-navigation.col-left {
    position: sticky;
    top: 75px;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    max-height: calc(100dvh - 89px);
    margin: 0;
    padding: 12px 10px 15px;
    overflow-y: auto;
    color: #f6f4fa;
    border: 1px solid #4d536c;
    border-radius: 13px;
    background: #343d56;
    box-shadow: 0 4px 13px #17203416;
  }
  body:not([data-layout="portal"]) #app-shell #community-navigation > .sidebar-primary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 10px;
  }
  body:not([data-layout="portal"]) #app-shell #community-navigation > .sidebar-primary a,
  body:not([data-layout="portal"]) #app-shell #community-navigation .sidebar-links a {
    min-height: 34px;
    padding: 7px 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #f5f3fa;
    box-shadow: none;
    font-size: .78rem;
    line-height: 1.3;
  }
  body:not([data-layout="portal"]) #app-shell #community-navigation .sidebar-primary .ui-icon { color: #f3e9d7; }
  body:not([data-layout="portal"]) #app-shell #community-navigation .sidebar-group { padding: 6px 0; border-top: 1px solid #ffffff25; }
  body:not([data-layout="portal"]) #app-shell #community-navigation .sidebar-group > summary { padding: 6px 5px; color: #eee3ca; font-size: .73rem; }
  body:not([data-layout="portal"]) #app-shell #community-navigation :is(.sidebar-primary,.sidebar-links) a:hover { background: #ffffff22; color: #fff; }
  body:not([data-layout="portal"]) #app-shell #community-navigation :is(.sidebar-primary,.sidebar-links) a[aria-current="page"] { background: #f7db95; color: #303647; font-weight: 800; }
  body:not([data-layout="portal"]) #app-shell #community-navigation a[aria-current="page"] .ui-icon { color: #303647; }
  body:not([data-layout="portal"]) #app-shell #community-navigation .sidebar-links .category-icon { width: 25px; height: 25px; padding: 4px; }
  body:not([data-layout="portal"]) #app-shell #community-navigation > .sidebar-primary::before { color: #d6c8ae; }
  body:not([data-layout="portal"]) #app-shell #community-navigation .sidebar-empty,
  body:not([data-layout="portal"]) #app-shell #community-navigation .sidebar-topics-note { color: #d0cad9; }
  body:not([data-layout="portal"]) #app-shell #community-navigation .sidebar-group .sidebar-chevron { color: #e1d9c8; }
  body:not([data-layout="portal"]) #app-shell #community-navigation .sidebar-group > summary:focus-visible,
  body:not([data-layout="portal"]) #app-shell #community-navigation a:focus-visible {
    outline: 3px solid #ffe5a1;
    outline-offset: 2px;
  }
}
@media (min-width: 1181px) {
  body:not([data-layout="portal"]) #app-shell.shell {
    grid-template-columns: clamp(172px,12vw,202px) minmax(0,1fr) clamp(230px,16vw,250px);
  }
  body:not([data-layout="portal"]) #app-shell > .col-right {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
  }
  body:not([data-layout="portal"]) #app-shell > .col-right > .side-card {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid #e9e0d2;
    border-radius: 13px;
    background: #fffdf8f5;
    box-shadow: 0 2px 10px #40352c0c;
  }
  body:not([data-layout="portal"]) #app-shell > .col-right > .account-card {
    border-color: #cce6d9;
    background: #f3fcf6f7;
  }
  body:not([data-layout="portal"]) #app-shell > .col-right > .trending-card { background: #fffaf3f7; }
  body:not([data-layout="portal"]) #app-shell > .col-right > .resources-card { background: #f4f9fcf7; }
  body:not([data-layout="portal"]) #app-shell > .col-right > .community-card { background: #faf7fff7; }
  body:not([data-layout="portal"]) #app-shell .col-right > .side-card > .side-title {
    margin-bottom: 9px;
    color: #343949;
    font-size: .82rem;
  }
}
@media (min-width:721px) and (max-width:1180px) {
  body:not([data-layout="portal"]) #app-shell.shell {
    grid-template-columns: 176px minmax(0,1fr);
  }
  body:not([data-layout="portal"]) #app-shell > .col-right { display: none; }
}
/* All central panels share borders, radii, ink and rhythm; board artwork stays distinct. */
body:not([data-layout="portal"]) #app-shell .community-header,
body:not([data-layout="portal"]) #app-shell .page-art-banner,
body:not([data-layout="portal"]) #app-shell .category-banner {
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 13px;
  box-shadow: 0 2px 10px #40352c0c;
}
body:not([data-layout="portal"]) #app-shell > .col-main > .card,
body:not([data-layout="portal"]) #app-shell .feed-experience > .card {
  border-radius: 13px;
  border-color: #e9e0d2;
  box-shadow: 0 2px 10px #40352c0c;
}
body:not([data-layout="portal"]) #app-shell :is(.page-title,.section-title) { color: #343949; letter-spacing: -.025em; }
body:not([data-layout="portal"]) #app-shell .community-header h1 { color: #303649; letter-spacing: -.035em; }
body:not([data-layout="portal"]) #app-shell .feed-reading-panel,
body:not([data-layout="portal"]) #app-shell .feed-focus-pane { border-radius: 13px; }
body:not([data-layout="portal"]) #app-shell .feed-list-heading { border-radius: 13px 13px 0 0; }
body:not([data-layout="portal"]) #app-shell .page-art-banner { border-color: #f3e6d4; }
/* Keep board-specific illustrations visible with the same header typography as other pages. */
@media (min-width:1181px) {
  body[data-layout="reader"][data-view="category"] #app-shell .category-banner {
    height: auto;
    min-height: 142px;
    padding: 20px 22px;
  }
  body[data-layout="reader"][data-view="category"] #app-shell .category-banner-content {
    display: flex;
  }
  body[data-layout="reader"][data-view="category"] #app-shell .category-banner::before {
    background: linear-gradient(90deg,#fffdf9f5 0%,#fffdf9ed 34%,#fffdf9b8 58%,transparent 89%);
  }
}
/* Mobile keeps existing drawer and board styles; only align content corners and rhythm. */
@media(max-width:720px) {
  body:not([data-layout="portal"]) #app-shell > .col-main { min-width: 0; }
  body:not([data-layout="portal"]) #app-shell :is(.community-header,.page-art-banner,.category-banner) { margin-bottom: 12px; }
  body:not([data-layout="portal"]) #app-shell > .col-main > .card { border-radius: 13px; }
}
@media(prefers-reduced-transparency:reduce) {
  body:not([data-layout="portal"]) #app-shell.shell { background: #faf7f0; }
}
@media(prefers-contrast:more) and (min-width:721px) {
  body:not([data-layout="portal"]) #app-shell #community-navigation.col-left { background:#30394e; border-color:#253248; }
  body:not([data-layout="portal"]) #app-shell #community-navigation .sidebar-links a { color:#fff; }
}
/* Portal has its own panorama rather than reusing the latest/discover backdrop. */
body[data-view="home"]:not([data-category]) {
  isolation: isolate;
  background: #f1f1e9;
}
body[data-view="home"]:not([data-category])::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(#f5f0e8a0,#f7f2eac4), url("/assets/backgrounds/portal-home.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media(max-width:720px) {
  body[data-view="home"]:not([data-category])::before {
    background-image: linear-gradient(#f7f1e9b4,#f7f2eac7),url("/assets/backgrounds/portal-home.svg");
    background-position: center top;
  }
}
@media(prefers-reduced-transparency:reduce) {
  body[data-view="home"]:not([data-category])::before { background-image:linear-gradient(#faf8f1e8,#faf8f1e8),url("/assets/backgrounds/portal-home.svg"); }
}
@media(prefers-contrast:more) {
  body[data-view="home"]:not([data-category])::before { background-image:none;background-color:#f4f2ed; }
}