/*
 * BBBS homepage layout: approved wide dashboard composition, with the
 * brand colors documented before commit b6ff81a (2026-10-31).
 * This stylesheet loads last and does not revert data, routes or operations.
 * Original reference: navy #252945, gold #f2ce50, warm #f5f3ef,
 * cream #fffdf9, mint #bce9e8, soft mauve #e2def2.
 */
:root {
  --bbbs-classic-navy: #252945;
  --bbbs-classic-gold: #f2ce50;
  --bbbs-classic-cream: #fffdf9;
  --bbbs-classic-bg: #f5f3ef;
  --bbbs-classic-muted: #666b80;
  --bbbs-classic-line: #e3dccc;
}
body:not([data-view="admin"]) {
  --bbbs-rail: var(--bbbs-classic-navy);
  --bbbs-surface: var(--bbbs-classic-cream);
  --bbbs-paper: #fff8eb;
  --bbbs-ink: #34394c;
  --bbbs-muted: var(--bbbs-classic-muted);
  --bbbs-line: var(--bbbs-classic-line);
  --bbbs-gold: var(--bbbs-classic-gold);
  --bbs-layout-paper: var(--bbbs-classic-cream);
  --bbs-layout-edge: var(--bbbs-classic-line);
  --bbs-layout-accent: #a77d25;
  background-color: var(--bbbs-classic-bg);
}
body:not([data-view="admin"]) .topbar {
  background: linear-gradient(115deg, #4c506d, #252945 58%, #393d5b);
  border-bottom: 1px solid #ffffff32;
}
body:not([data-view="admin"]) .topbar .brand,
body:not([data-view="admin"]) .topbar-user > a:not(.header-compose),
body:not([data-view="admin"]) .topbar-user .me-slot a {
  color: #fff9e8;
}
body:not([data-view="admin"]) .topbar .brand-dot { color: var(--bbbs-classic-gold); }
body:not([data-view="admin"]) .topbar .brand-mark {
  background: var(--bbbs-classic-gold);
  box-shadow: inset 0 1px #fff5bd;
}
body:not([data-view="admin"]) .topbar-search input {
  color: #fff;
  background: #41455f;
  border-color: #626781;
}
body:not([data-view="admin"]) .topbar-search input::placeholder { color: #d3d5e1; }
body:not([data-view="admin"]) .topbar .icon-link {
  color: #fff9e8;
  background: #41455f;
  border-color: #ffffff38;
}
body:not([data-view="admin"]) .topbar-user > .header-compose {
  color: var(--bbbs-classic-navy);
  background: var(--bbbs-classic-gold);
  border-color: var(--bbbs-classic-gold);
  box-shadow: inset 0 1px #fff2bb;
}
body:not([data-view="admin"]) .topbar-user > .header-compose:hover {
  color: var(--bbbs-classic-navy);
  background: #ffe286;
}
body:not([data-view="admin"]) #app-shell > .col-right > .account-card { background: #dcf2ed; border-color: #bce9e8; }
body:not([data-view="admin"]) #app-shell > .col-right > .community-card { background: #efebf7; border-color: #e2def2; }
body:not([data-view="admin"]) #app-shell > .col-right > .trending-card { background: #fff5df; border-color: #f3e0bb; }
body:not([data-view="admin"]) #app-shell > .col-right > .resources-card { background: #eaf1f7; border-color: #d6e1ee; }
body[data-layout="reader"] #app-shell .feed-reading-panel .post-list .post-card.is-selected {
  border-left-color: #c99b36;
  background: #fff1c9;
}

/* Homepage follows the reference screenshot: sidebar, full-width hero,
   narrow metrics strip, two equal news cards, board cards plus shortcuts. */
body[data-layout="portal"] {
  --portal-ink: #34394c;
  --portal-muted: #666b80;
  --portal-line: #e7decf;
}
body[data-layout="portal"]:not([data-category])::before {
  background-image: linear-gradient(#f8f4ebca, #f8f4ebca), url("/assets/backgrounds/home.webp");
  background-position: center;
  background-size: cover;
}
body[data-layout="portal"] #app-shell .portal-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-layout="portal"] #app-shell .portal-intro,
body[data-layout="portal"] #app-shell .portal-livebar,
body[data-layout="portal"] #app-shell .portal-editorial > section,
body[data-layout="portal"] #app-shell .portal-boards,
body[data-layout="portal"] #app-shell .portal-quick {
  min-width: 0;
  border: 1px solid #e8ddca;
  border-radius: 16px;
  background-color: #fffdf9f5;
  box-shadow: 0 4px 14px #34395910;
}
body[data-layout="portal"] #app-shell .portal-intro {
  min-height: 195px;
  padding: 23px clamp(22px, 3vw, 38px);
  overflow: hidden;
  background-color: #f5ead4;
}
body[data-layout="portal"] #app-shell .portal-intro::before {
  background: linear-gradient(90deg, #fff8ebf3 0%, #fff5e9e3 32%, #fff3e8a8 54%, transparent 87%);
}
body[data-layout="portal"] #app-shell .portal-intro h1 { color: #252945; font-size: clamp(1.7rem, 2.35vw, 2.35rem); }
body[data-layout="portal"] #app-shell .portal-intro p { color: #51576c; font-size: .86rem; }
body[data-layout="portal"] #app-shell .portal-intro-actions .portal-intro-primary {
  color: #fff9e8;
  background: #343959;
  border-color: #343959 !important;
}
body[data-layout="portal"] #app-shell .portal-intro-actions .portal-intro-secondary {
  color: #252945;
  background: #ffe69b;
  border-color: #e6c968 !important;
}
body[data-layout="portal"] #app-shell .portal-livebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 9px clamp(15px, 2.1vw, 30px);
  gap: 12px;
  background: #fffaf0f7;
}
body[data-layout="portal"] #app-shell .portal-livebar .portal-live-dot {
  background: #e2b640;
  box-shadow: 0 0 0 3px #fff0c1;
}
body[data-layout="portal"] #app-shell .portal-live-stats {
  flex: 1;
  justify-content: space-evenly;
  gap: 8px clamp(10px, 1.4vw, 18px);
}
body[data-layout="portal"] #app-shell .portal-live-stats > span { color: #5c6070; }
body[data-layout="portal"] #app-shell .portal-live-stats strong { color: #292f49; font-size: 1.12rem; }
body[data-layout="portal"] #app-shell .portal-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  border: 0;
  background: transparent;
}
body[data-layout="portal"] #app-shell .portal-editorial > section {
  padding: 17px clamp(13px, 1.7vw, 24px) 13px;
  min-height: 315px;
}
body[data-layout="portal"] #app-shell .portal-editorial .portal-latest {
  border: 1px solid #e8ddca;
}
body[data-layout="portal"] #app-shell .portal-section-head {
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
body[data-layout="portal"] #app-shell .portal-section-head h2 {
  margin: 3px 0;
  color: #292e48;
  font-size: 1.15rem;
}
body[data-layout="portal"] #app-shell .portal-section-head p {
  font-size: .71rem;
}
body[data-layout="portal"] #app-shell .portal-kicker,
body[data-layout="portal"] #app-shell .portal-eyebrow { color: #97702e; }
body[data-layout="portal"] #app-shell .portal-more,
body[data-layout="portal"] #app-shell .portal-bottom-link { color: #8e682c; }
body[data-layout="portal"] #app-shell .portal-timeline-row,
body[data-layout="portal"] #app-shell .portal-rank-row {
  padding: 9px 2px;
  border-bottom-color: #e8e1d7;
}
body[data-layout="portal"] #app-shell .portal-rank-row:nth-child(-n+3) .portal-rank-number { color: #c28d2c; }
body[data-layout="portal"] #app-shell .portal-timeline-row:hover,
body[data-layout="portal"] #app-shell .portal-rank-row:hover { background: #fff5e2; }
body[data-layout="portal"] #app-shell .portal-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.82fr) minmax(255px, .82fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}
body[data-layout="portal"] #app-shell .portal-boards {
  padding: 17px clamp(13px, 1.7vw, 24px);
}
body[data-layout="portal"] #app-shell .portal-board-features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
body[data-layout="portal"] #app-shell .portal-board-feature {
  padding: 11px;
  border: 1px solid #e7dfd2;
  border-radius: 11px;
  background: #fffaf1;
  box-shadow: none;
}
body[data-layout="portal"] #app-shell .portal-board-icon { background: #ffe7ac; }
body[data-layout="portal"] #app-shell .portal-board-feature:nth-child(4n+2) .portal-board-icon { background: #d1edeb; }
body[data-layout="portal"] #app-shell .portal-board-feature:nth-child(4n+3) .portal-board-icon { background: #e9e1f4; }
body[data-layout="portal"] #app-shell .portal-board-posts a:not(:first-child) { display: none; }
body[data-layout="portal"] #app-shell .portal-quick {
  display: flex;
  flex-direction: column;
  padding: 17px clamp(13px, 1.7vw, 24px);
}
body[data-layout="portal"] #app-shell .portal-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  flex: 1;
  align-content: start;
}
body[data-layout="portal"] #app-shell .portal-quick-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 91px;
  padding: 13px;
  border: 1px solid #e6dccc;
  border-radius: 12px;
  color: #343959;
  background: #fff8e9;
}
body[data-layout="portal"] #app-shell .portal-quick-link:hover {
  border-color: #cda44c;
  background: #fff0cb;
  text-decoration: none;
}
body[data-layout="portal"] #app-shell .portal-quick-link .ui-icon {
  width: 23px;
  height: 23px;
  color: #a77523;
}
body[data-layout="portal"] #app-shell .portal-quick-link strong {
  font-size: .84rem;
}
body[data-layout="portal"] #app-shell .portal-quick-link small {
  color: #6b7080;
  font-size: .68rem;
  line-height: 1.45;
}

@media (min-width: 721px) {
  body[data-layout="portal"] #app-shell #community-navigation.col-left {
    background: #fffaf0ef;
    color: #343959;
    border: 1px solid #e1d5c3;
    border-radius: 14px;
    box-shadow: 0 4px 13px #3b385013;
  }
  body[data-layout="portal"] #app-shell #community-navigation > .sidebar-primary a,
  body[data-layout="portal"] #app-shell #community-navigation .sidebar-links a {
    color: #3f455b;
  }
  body[data-layout="portal"] #app-shell #community-navigation .sidebar-group > summary,
  body[data-layout="portal"] #app-shell #community-navigation > .sidebar-primary::before {
    color: #74694f;
  }
  body[data-layout="portal"] #app-shell #community-navigation .sidebar-primary .ui-icon {
    color: #666b80;
  }
  body[data-layout="portal"] #app-shell #community-navigation :is(.sidebar-primary,.sidebar-links) a:hover {
    color: #252945;
    background: #fff0c9;
  }
  body[data-layout="portal"] #app-shell #community-navigation :is(.sidebar-primary,.sidebar-links) a[aria-current="page"] {
    color: #252945;
    background: #ffe3a1;
    box-shadow: inset 3px 0 #c99227;
  }
  body[data-layout="portal"] #app-shell #community-navigation .sidebar-group { border-top-color: #dfd3be; }
  body[data-layout="portal"] #app-shell #community-navigation .sidebar-empty,
  body[data-layout="portal"] #app-shell #community-navigation .sidebar-topics-note { color: #797487; }
}
@media (min-width: 721px) and (max-width: 1180px) {
  body[data-layout="portal"] #app-shell.shell {
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 10px;
  }
  body[data-layout="portal"] #app-shell .portal-lower {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-layout="portal"] #app-shell .portal-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body[data-layout="portal"] #app-shell .portal-editorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 920px) {
  body[data-layout="portal"] #app-shell .portal-editorial,
  body[data-layout="portal"] #app-shell .portal-lower {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-layout="portal"] #app-shell .portal-board-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  body[data-layout="portal"] #app-shell .portal-dashboard { gap: 10px; }
  body[data-layout="portal"] #app-shell .portal-intro {
    min-height: 180px;
    padding: 18px;
  }
  body[data-layout="portal"] #app-shell .portal-livebar {
    gap: 10px;
    justify-content: flex-start;
    padding: 13px;
  }
  body[data-layout="portal"] #app-shell .portal-live-stats {
    justify-content: flex-start;
  }
  body[data-layout="portal"] #app-shell .portal-editorial > section,
  body[data-layout="portal"] #app-shell .portal-boards,
  body[data-layout="portal"] #app-shell .portal-quick { padding: 16px; }
  body[data-layout="portal"] #app-shell .portal-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-layout="portal"] #app-shell .portal-board-features {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-layout="portal"] #app-shell .portal-quick-link {
    min-height: 80px;
  }
}
@media (prefers-reduced-transparency: reduce) {
  body[data-layout="portal"] #app-shell .portal-intro,
  body[data-layout="portal"] #app-shell .portal-livebar,
  body[data-layout="portal"] #app-shell .portal-editorial > section,
  body[data-layout="portal"] #app-shell .portal-boards,
  body[data-layout="portal"] #app-shell .portal-quick {
    background-color: #fffdf9;
  }
}


/* Site-wide layout alignment: homepage is the shared reference.
 * Keep the same outer width, light navigation rail, 12px gutters,
 * warm paper panels and classic gold/navy palette on every public page.
 * Only the number of interior reading lanes changes by page function.
 */
@media (min-width: 721px) {
  body:not([data-view="admin"]) #app-shell #community-navigation.col-left {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 75px;
    min-width: 0;
    height: calc(100dvh - 89px);
    max-height: calc(100dvh - 89px);
    overflow-y: auto;
    margin: 0;
    padding: 12px 10px 14px;
    border: 1px solid #e1d5c3;
    border-radius: 14px;
    background: #fffaf0;
    color: #343959;
    box-shadow: 0 4px 13px #3b385013;
    scrollbar-width: thin;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation > :is(.sidebar-primary,.sidebar-group) {
    flex-shrink: 0;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation > .sidebar-primary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    order: 0;
    margin: 0 0 4px;
    padding: 0 0 10px;
    border-bottom: 1px solid #dfd3be;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation > .sidebar-boards { order: 1; }
  body:not([data-view="admin"]) #app-shell #community-navigation > .sidebar-recent { order: 2; }
  body:not([data-view="admin"]) #app-shell #community-navigation > .sidebar-group {
    min-width: 0;
    margin: 0;
    padding: 7px 0;
    border: 0;
    border-top: 1px solid #dfd3be;
    background: transparent;
    box-shadow: none;
  }
  /* One divider after 村公所: the primary nav bottom border is sufficient. */
  body:not([data-view="admin"]) #app-shell #community-navigation > .sidebar-boards {
    border-top: 0;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation > .sidebar-mobile-topics,
  body:not([data-view="admin"]) #app-shell #community-navigation > .sidebar-resources-group {
    display: none;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation > .sidebar-primary::before,
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-group > summary {
    color: #74694f;
    font-size: .82rem;
    font-weight: 800;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation > .sidebar-primary::before {
    margin-bottom: 6px;
    padding-inline: 6px;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-group > summary {
    padding: 6px 5px 7px;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-group .sidebar-chevron { color: #847865; }
  body:not([data-view="admin"]) #app-shell #community-navigation :is(.sidebar-primary,.sidebar-links) a {
    min-height: 38px;
    padding: 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: #3f455b;
    font-size: .9375rem;
    line-height: 1.45;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-primary .ui-icon { color: #666b80; }
  body:not([data-view="admin"]) #app-shell #community-navigation :is(.sidebar-primary,.sidebar-links) a:hover {
    background: #fff0c9;
    color: #252945;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation :is(.sidebar-primary,.sidebar-links) a[aria-current="page"] {
    background: #ffe3a1;
    color: #252945;
    font-weight: 800;
    box-shadow: inset 3px 0 #c99227;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation :is(.sidebar-primary,.sidebar-links) a[aria-current="page"] .ui-icon {
    color: #252945;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-links .category-icon {
    width: 25px;
    height: 25px;
    padding: 4px;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-empty,
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-topics-note {
    color: #797487;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-links { gap: 2px; }
  body:not([data-view="admin"]) #app-shell #community-navigation a:focus-visible,
  body:not([data-view="admin"]) #app-shell #community-navigation summary:focus-visible {
    outline: 2px solid #c99227;
    outline-offset: 2px;
  }
}
@media (min-width: 1181px) {
  /* Navigation, content and utilities share one continuous desktop frame. */
  body:not([data-view="admin"]) #app-shell #community-navigation.col-left {
    top: 61px;
    height: calc(100dvh - 75px);
    max-height: calc(100dvh - 75px);
  }
  body:not([data-view="admin"]) #app-shell.shell {
    display: grid;
    grid-template-columns: clamp(176px,13vw,208px) minmax(0,1fr) clamp(218px,17vw,252px);
    align-items: stretch;
    gap: 0;
    box-sizing: border-box;
    width: calc(100% - 24px);
    max-width: 1900px;
    margin: 12px auto 0;
    padding: 0;
    border: 1px solid #e1d5c3;
    border-radius: 14px;
    background: #fffaf0;
    box-shadow: 0 4px 13px #3b385013;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation.col-left {
    border: 0;
    border-radius: 14px 0 0 14px;
    background: transparent;
    box-shadow: none;
  }
  body:not([data-view="admin"]) #app-shell > .col-main {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-inline: 1px solid #e1d5c3;
    background: #fffdf9;
  }
  body:not([data-view="admin"]) #app-shell > .col-right {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 61px;
    gap: 0;
    min-width: 0;
    height: calc(100dvh - 75px);
    max-height: calc(100dvh - 75px);
    overflow-y: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 14px 14px 0;
    background: transparent;
    box-shadow: none;
    scrollbar-width: thin;
  }
  body:not([data-view="admin"]) #app-shell > .col-right > .side-card {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    margin: 0;
    padding: 15px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body:not([data-view="admin"]) #app-shell > .col-right > .side-card + .side-card {
    border-top: 1px solid #dfd3be;
  }
  /* A consistent heading and card system, not a new information hierarchy. */
  body:not([data-view="admin"]) #app-shell > .col-main :is(.page-title,.listing-heading) {
    margin-bottom: 12px;
    border: 1px solid #e8ddca;
    border-radius: 0;
    background: #fffdf9f5;
    color: #343959;
    box-shadow: none;
  }
  body:not([data-view="admin"]) #app-shell > .col-main > .card,
  body:not([data-view="admin"]) #app-shell > .col-main .search-form,
  body:not([data-view="admin"]) #app-shell > .col-main .post-full,
  body:not([data-view="admin"]) #app-shell > .col-main .comments-section,
  body:not([data-view="admin"]) #app-shell > .col-main .result-list,
  body:not([data-view="admin"]) #app-shell > .col-main .settings-grid > .card {
    border: 1px solid #e8ddca;
    border-radius: 0;
    box-shadow: none;
    background-color: #fffdf9f5;
  }
  body:not([data-view="admin"]) #app-shell > .col-main .result-list {
    overflow: hidden;
  }
  /* Let the reading area fill the space below its real banner height.
     The old 870px pane cap left a blank strip on tall desktop windows. */
  body[data-layout="reader"] #app-shell > .col-main:has(> .feed-experience) {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 75px);
    min-height: 0;
  }
  body[data-layout="reader"] #app-shell > .col-main > :not(.feed-experience) {
    flex-shrink: 0;
  }
  body[data-layout="reader"] #app-shell > .col-main > .feed-experience {
    flex: 1 1 0;
    min-height: 0;
  }
  /* The topic index and reader share one continuous paper surface. */
  body[data-layout="reader"] #app-shell .feed-reading-layout {
    display: grid;
    grid-template-columns: minmax(248px,.78fr) minmax(310px,1.22fr);
    align-items: stretch;
    gap: 0;
    min-width: 0;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: #fffdf9;
    box-shadow: none;
  }
  body[data-layout="reader"] #app-shell .feed-reading-panel,
  body[data-layout="reader"] #app-shell .feed-focus-pane {
    box-sizing: border-box;
    position: static;
    height: 100%;
    min-height: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body[data-layout="reader"] #app-shell .feed-reading-panel {
    border-right: 1px solid #e8ddca;
    border-radius: 0;
    background: #fffaf1;
  }
  body[data-layout="reader"] #app-shell .feed-list-heading { border-radius: 0; }
  body[data-layout="reader"] #app-shell .feed-reading-panel .post-list .post-card.is-selected {
    border-left-color: #c99227;
    background: #ffeac0;
    box-shadow: inset 0 0 0 1px #f1d69a;
  }
  body[data-layout="reader"] #app-shell .feed-reading-panel .post-list .post-card:hover {
    background: #fff2d8;
  }
  body[data-layout="reader"] #app-shell .feed-focus-article {
    min-height: 100%;
    padding: clamp(18px,2vw,30px);
    background: transparent;
    box-shadow: none;
  }
  body[data-layout="reader"] #app-shell .feed-focus-discussion {
    color: #343959;
    background: #ffe7a9;
  }
  body[data-layout="reader"] #app-shell .feed-focus-discussion:hover {
    background: #f2ce50;
  }
  /* Main navigation banners also meet the content and surrounding rails. */
  body:not([data-view="admin"]) #app-shell > .col-main :is(.community-header,.page-art-banner,.category-banner,.portal-page-banner,.friends-welcome,.village-welcome) {
    margin-bottom: 0;
    border: 0;
    border-bottom: 1px solid #e8ddca;
    border-radius: 0;
    box-shadow: none;
  }
  body[data-view="bookmarks"] #app-shell > .col-main > .portal-bookmarks {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* Override the legacy generic .card rule for these nested page banners. */
  body:is([data-view="friends"],[data-view="community"]) #app-shell .col-main :is(.friends-welcome,.village-welcome) {
    margin-bottom: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e8ddca !important;
    border-radius: 0 !important;
  }
  /* Content sections follow the joined frame instead of floating cards. */
  body:is([data-view="friends"],[data-view="community"]) #app-shell .col-main :is(.friends-filters,.friend-card,.village-section,#portrait-loading,#portrait-error) {
    border-radius: 0 !important;
    box-shadow: none;
  }
  body[data-view="friends"] #app-shell .col-main .friends-filters,
  body[data-view="community"] #app-shell .col-main .village-section {
    margin-bottom: 0;
    border-inline: 0;
    border-top: 0;
  }
  body[data-view="feed_latest"] #app-shell > .col-main > .page-art-banner + .listing-heading {
    margin-bottom: 0;
    border: 0;
    border-bottom: 1px solid #e8ddca;
    border-radius: 0;
    box-shadow: none;
  }
}
@media (min-width: 721px) and (max-width: 1180px) {
  body:not([data-layout="portal"]):not([data-view="admin"]) #app-shell.shell {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 176px minmax(0,1fr);
    align-items: start;
    gap: 10px;
    max-width: 1690px;
    margin: 12px auto 0;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body:not([data-layout="portal"]):not([data-view="admin"]) #app-shell > .col-main { min-width: 0; width: 100%; padding: 0; }
  body:not([data-layout="portal"]):not([data-view="admin"]) #app-shell > .col-right { display: none; }
}
@media (max-width: 720px) {
  /* Keep the existing mobile menu, one-column content and compose sheet.
     Align palette and radii without changing interactions. */
  body:not([data-view="admin"]) #app-shell .page-title { color: #343959; }
  body:not([data-view="admin"]) #app-shell > .col-main :is(.community-header,.page-art-banner,.category-banner) {
    border-radius: 14px;
  }
}


/* Header grid aligned to the same desktop content columns as #app-shell.
   Red-frame reference: logo above the first navigation column, search above
   the main content, account tools inside the far-right utility column.
   Do not alter shared DOM controls, dropdowns or phone navigation. */
@media (min-width: 1181px) {
  body:not([data-view="admin"]) .topbar-inner {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: clamp(176px, 13vw, 208px) minmax(0, 1fr) clamp(218px, 17vw, 252px);
    align-items: center;
    column-gap: 12px;
    width: 100%;
    max-width: 1924px;
    min-height: 56px;
    margin-inline: auto;
    padding: 4px 12px;
  }
  body:not([data-view="admin"]) .topbar .topbar-inner > a.brand.brand-wordmark {
    width: 128px;
  }
  body:not([data-view="admin"]) .topbar-inner > .brand {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
  }
  body:not([data-view="admin"]) .topbar-inner > .topbar-search {
    display: block;
    grid-column: 2;
    min-width: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    flex: none;
  }
  body:not([data-view="admin"]) .topbar-inner > .topbar-search input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  body:not([data-view="admin"]) .topbar-inner > .topbar-user {
    display: flex;
    grid-column: 3;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    justify-self: stretch;
    min-width: 0;
    width: 100%;
    gap: 3px;
    margin: 0;
  }
  body:not([data-view="admin"]) .topbar-user > .header-compose {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 36px;
    width: clamp(68px, 5.3vw, 82px);
    margin: 0;
    padding: 7px 7px;
    gap: 4px;
    border-radius: 11px;
    font-size: .77rem;
    white-space: nowrap;
  }
  body:not([data-view="admin"]) .topbar-user > .header-compose .ui-icon {
    flex: none;
    width: 16px;
    height: 16px;
  }
  body:not([data-view="admin"]) .topbar-user > .icon-link {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 32px;
    height: 36px;
    min-width: 32px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
  }
  body:not([data-view="admin"]) .topbar-user > .me-slot {
    display: flex;
    flex: 0 0 35px;
    justify-content: center;
    align-items: center;
    min-width: 0;
    width: 35px;
    margin: 0;
  }
  body:not([data-view="admin"]) .topbar-user .account-menu-trigger,
  body:not([data-view="admin"]) .topbar-user .account-menu-trigger .avatar {
    width: 32px;
    height: 32px;
  }
  body:not([data-view="admin"]) .topbar-user .account-menu {
    min-width: 0;
  }
  body:not([data-view="admin"]) .topbar-user > .me-slot .header-login {
    min-height: 36px;
    padding: 7px 8px;
    margin: 0;
    font-size: .75rem;
  }
  /* Guests have a login button instead of an avatar and need a wider slot. */
  body:not([data-view="admin"]) .topbar-user > .me-slot:has(.header-login) {
    flex-basis: 48px;
    width: 48px;
  }
}


/* Three-part dashboard highlights: restore the illustrated large member card,
   introduce a real-data daily community star, and group live stats in 2x2 tiles. */
body[data-layout="portal"] #app-shell .portal-live-panels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}
body[data-layout="portal"] #app-shell .portal-live-panels > :is(.portal-highlight-card, .portal-overview) {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: 7px;
  min-width: 0;
  min-height: 182px;
  margin: 0;
  padding: 12px clamp(12px, 1.05vw, 17px);
  overflow: hidden;
  border: 1px solid #e8ddca;
  border-radius: 16px;
  box-shadow: 0 4px 14px #34395910;
  background-color: #fffdf9f5;
}
body[data-layout="portal"] #app-shell .portal-new-member {
  background-image: linear-gradient(110deg,#fffdf7df,#fffef8b0), url("/assets/backgrounds/home-stats.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 55%;
}
body[data-layout="portal"] #app-shell .portal-daily-star {
  background-image: linear-gradient(110deg,#fff9e5e7,#fff9e5bc), url("/assets/backgrounds/home-stats.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 63% center;
}
body[data-layout="portal"] #app-shell .portal-friends {
  background: linear-gradient(145deg, #f2f8f5f4 0%, #f7f5eafb 100%);
}
body[data-layout="portal"] #app-shell .portal-friends-entry {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 2px 1px 0;
  color: #343959;
  text-decoration: none;
}
body[data-layout="portal"] #app-shell .portal-friends-entry:hover {
  color: #765b29;
  text-decoration: none;
}
body[data-layout="portal"] #app-shell .portal-friends-entry:focus-visible {
  border-radius: 9px;
  outline: 2px solid #b88a31;
  outline-offset: 3px;
}
body[data-layout="portal"] #app-shell .portal-friends-emblem {
  display: inline-grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid #c7e1d6;
  border-radius: 18px;
  background: #e1f1e9;
  color: #4d7975;
  box-shadow: inset 0 1px #ffffffc9, 0 4px 12px #425b5012;
}
body[data-layout="portal"] #app-shell .portal-friends-emblem .ui-icon {
  width: 24px;
  height: 24px;
}
body[data-layout="portal"] #app-shell .portal-friends-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body[data-layout="portal"] #app-shell .portal-friends-copy strong {
  font-size: clamp(.88rem, 1vw, 1rem);
  line-height: 1.35;
  font-weight: 850;
  color: #343959;
}
body[data-layout="portal"] #app-shell .portal-friends-copy small {
  color: #777b82;
  font-size: .69rem;
  line-height: 1.4;
}
body[data-layout="portal"] #app-shell .portal-friends-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #d8bf7d;
  border-radius: 10px;
  background: #f9e7b6;
  color: #745626;
  font-size: .76rem;
  font-weight: 800;
  transition: background .15s ease;
}
body[data-layout="portal"] #app-shell .portal-friends-entry:hover .portal-friends-cta {
  background: #f2ce50;
}

body[data-layout="portal"] #app-shell .portal-overview {
  background: #fffaf0f8;
}
body[data-layout="portal"] #app-shell .portal-highlight-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
body[data-layout="portal"] #app-shell .portal-highlight-heading h2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #464962;
  font-size: .83rem;
  line-height: 1.35;
  font-weight: 850;
}
body[data-layout="portal"] #app-shell .portal-highlight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: #aa8131;
  font-size: 1.05rem;
  line-height: 1;
}
body[data-layout="portal"] #app-shell .portal-highlight-pill {
  padding: 3px 8px;
  border: 1px solid #eadcae;
  border-radius: 100px;
  background: #fff4cd;
  color: #90722d;
  font-size: .69rem;
  line-height: 1.3;
  white-space: nowrap;
}
body[data-layout="portal"] #app-shell .portal-featured-member {
  display: flex;
  align-items: center;
  flex: 1;
  gap: clamp(8px, 1vw, 13px);
  min-width: 0;
  padding: 0;
  color: #343959;
  text-decoration: none;
}
body[data-layout="portal"] #app-shell .portal-featured-member:hover {
  color: #8a6423;
  text-decoration: none;
}
body[data-layout="portal"] #app-shell .portal-featured-member:focus-visible {
  outline: 2px solid #b88a31;
  outline-offset: 3px;
  border-radius: 8px;
}
body[data-layout="portal"] #app-shell .portal-featured-photo {
  position: relative;
  display: grid;
  flex: 0 0 77px;
  place-items: center;
  width: 77px;
  height: 77px;
  padding: 5px;
  transform: none;
  border: 2px solid #e8dfc7;
  border-radius: 19px;
  background: #fffdf7dc;
}
body[data-layout="portal"] #app-shell .portal-featured-photo > img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  image-rendering: pixelated;
  background: #e5eddc;
}
body[data-layout="portal"] #app-shell .portal-featured-ornament {
  position: absolute;
  display: grid;
  place-items: center;
  right: -10px;
  bottom: -9px;
  width: 26px;
  height: 26px;
  border: 2px solid #fffef2;
  border-radius: 12px;
  transform: none;
  background: #f6d77d;
  color: #a37a2c;
  font-size: 1.1rem;
}
body[data-layout="portal"] #app-shell .portal-featured-ornament > .portal-badge-symbol {
  display: block;
  width: 1em;
  height: 1em;
  transform: none;
}
body[data-layout="portal"] #app-shell .portal-daily-star .portal-featured-ornament {
  background: #f9df8b;
  color: #98701b;
}
body[data-layout="portal"] #app-shell .portal-featured-details {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
body[data-layout="portal"] #app-shell .portal-featured-details strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(.9rem, 1.05vw, 1.09rem);
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-layout="portal"] #app-shell .portal-featured-details time,
body[data-layout="portal"] #app-shell .portal-star-contribution {
  font-size: .71rem;
  color: #737489;
  font-variant-numeric: tabular-nums;
}
body[data-layout="portal"] #app-shell .portal-star-rule {
  margin: 0;
  font-size: .62rem;
  color: #7e745e;
  line-height: 1.3;
}
body[data-layout="portal"] #app-shell .portal-highlight-note {
  margin: auto 0;
  color: #797487;
  font-size: .82rem;
  line-height: 1.6;
}
body[data-layout="portal"] #app-shell .portal-overview .portal-live-more {
  margin: 0;
  font-size: .74rem;
  white-space: nowrap;
}
body[data-layout="portal"] #app-shell .portal-overview .portal-live-stats {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  min-width: 0;
}
body[data-layout="portal"] #app-shell .portal-overview .portal-stat-tile {
  display: flex;
  align-items: center;
  gap: clamp(5px, .8vw, 10px);
  min-width: 0;
  min-height: 52px;
  padding: 6px clamp(5px, .6vw, 10px);
  border: 1px solid #ffffffc9;
  border-radius: 11px;
  background: #e5f3ee;
}
body[data-layout="portal"] #app-shell .portal-overview .portal-stat-bot { background: #fff2cf; }
body[data-layout="portal"] #app-shell .portal-overview .portal-stat-post { background: #eee8f3; }
body[data-layout="portal"] #app-shell .portal-overview .portal-stat-online { background: #f9e9e9; }
body[data-layout="portal"] #app-shell .portal-stat-tile .ui-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: #617c73;
}
body[data-layout="portal"] #app-shell .portal-stat-bot .ui-icon { color: #a78328; }
body[data-layout="portal"] #app-shell .portal-stat-post .ui-icon { color: #857798; }
body[data-layout="portal"] #app-shell .portal-stat-online .ui-icon { color: #a97788; }
body[data-layout="portal"] #app-shell .portal-stat-tile > span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 8px;
  min-width: 0;
}
body[data-layout="portal"] #app-shell .portal-stat-tile strong {
  color: #2b3049;
  font-size: clamp(1.08rem, 1.3vw, 1.42rem);
  line-height: 1.15;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
body[data-layout="portal"] #app-shell .portal-stat-tile small {
  color: #65677e;
  font-size: .69rem;
  white-space: nowrap;
}
@media (min-width: 921px) {
  body[data-layout="portal"] #app-shell .portal-live-panels > :is(.portal-highlight-card, .portal-overview) {
    height: 182px;
    min-height: 182px;
    max-height: 182px;
  }
}
@media (min-width: 921px) and (max-width: 1380px) {
  body[data-layout="portal"] #app-shell .portal-live-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-layout="portal"] #app-shell .portal-live-panels > :is(.portal-highlight-card, .portal-overview) {
    min-height: 182px;
    padding: 11px 14px;
  }
  body[data-layout="portal"] #app-shell .portal-highlight-pill { display: none; }
  body[data-layout="portal"] #app-shell .portal-featured-member {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }
  body[data-layout="portal"] #app-shell .portal-featured-details { gap: 5px; }
  body[data-layout="portal"] #app-shell .portal-stat-tile {
    flex-wrap: wrap;
  }
}
@media (max-width: 920px) {
  body[data-layout="portal"] #app-shell .portal-live-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  body[data-layout="portal"] #app-shell .portal-live-panels > :is(.portal-highlight-card, .portal-overview) {
    min-height: 178px;
    padding: 12px;
  }
  body[data-layout="portal"] #app-shell .portal-overview {
    grid-column: auto;
  }
}
@media (max-width: 720px) {
  body[data-layout="portal"] #app-shell .portal-live-panels {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-layout="portal"] #app-shell .portal-overview {
    grid-column: auto;
  }
  body[data-layout="portal"] #app-shell .portal-live-panels > :is(.portal-highlight-card, .portal-overview) {
    min-height: 174px;
    padding: 13px;
  }
  body[data-layout="portal"] #app-shell .portal-featured-member {
    justify-content: flex-start;
  }
  body[data-layout="portal"] #app-shell .portal-featured-photo {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
  }
}
@media (prefers-reduced-transparency: reduce) {
  body[data-layout="portal"] #app-shell .portal-live-panels > :is(.portal-highlight-card, .portal-overview) {
    background-color: #fffdf9;
  }
}
@media (prefers-contrast: more) {
  body[data-layout="portal"] #app-shell .portal-new-member,
  body[data-layout="portal"] #app-shell .portal-daily-star {
    background-image: none;
  }
}


/* Homepage artwork refresh: retain the existing outer grid, geometry and breakpoints. */
body[data-layout="portal"] #app-shell .portal-intro-art { object-position: center 54%; }
body[data-layout="portal"] #app-shell .portal-intro::before { background: linear-gradient(90deg,#fffaf2 0%,#fffaf2f5 26%,#fffaf2d9 43%,#fffaf23b 66%,transparent 85%); }
body[data-layout="portal"] #app-shell .portal-intro-copy { text-shadow: 0 1px #fffaf299; }
body[data-layout="portal"] #app-shell .portal-intro-actions a { box-shadow: 0 2px 7px #3b354010; }
body[data-layout="portal"] #app-shell .portal-new-member { background-image: linear-gradient(90deg,#f5fbf6fa 0%,#f5fbf6eb 43%,#f5fbf659 100%),url('/assets/banners/home-new-member-v2.webp'); background-position: center; }
body[data-layout="portal"] #app-shell .portal-daily-star { background-image: linear-gradient(90deg,#f7f3fefa 0%,#f7f3feeb 43%,#f7f3fe69 100%),url('/assets/banners/home-daily-star-v2.webp'); background-position: center; }
body[data-layout="portal"] #app-shell .portal-overview { background-image: linear-gradient(90deg,#fffaf3f5,#fffaf3c9),url('/assets/banners/home-overview-v2.webp'); background-size: cover; background-position: center; }
body[data-layout="portal"] #app-shell .portal-friends { background-image: linear-gradient(90deg,#f6fbf6fa 0%,#f6fbf6eb 38%,#f6fbf64d 100%),url('/assets/banners/home-friends-v2.webp'); background-size: cover; background-position: center; }
body[data-layout="portal"] #app-shell .portal-new-member .portal-highlight-pill { color:#416b59; background:#e9f5e9e8; border-color:#c7ddca; }
body[data-layout="portal"] #app-shell .portal-daily-star .portal-highlight-pill { color:#6b568b; background:#efe7f9e8; border-color:#d9cce9; }
body[data-layout="portal"] #app-shell .portal-friends .portal-highlight-pill { color:#416b59; background:#e9f5e9e8; border-color:#c7ddca; }
body[data-layout="portal"] #app-shell .portal-featured-photo { flex-basis:64px; width:64px; height:64px; border-radius:16px; padding:4px; transform:none; border-color:#d6e4d7; background:#fffffff2; box-shadow:0 4px 10px #354f3c0d; }
body[data-layout="portal"] #app-shell .portal-daily-star .portal-featured-photo { border-color:#ded2ee; }
body[data-layout="portal"] #app-shell .portal-featured-photo > img { border-radius:10px; }
body[data-layout="portal"] #app-shell .portal-featured-ornament { width:23px; height:23px; right:-7px; bottom:-6px; font-size:.9rem; transform:none; border-radius:50%; }
body[data-layout="portal"] #app-shell .portal-featured-details { gap:4px; }
body[data-layout="portal"] #app-shell .portal-member-greeting { font-size:.65rem; line-height:1.35; color:#4f7161; }
body[data-layout="portal"] #app-shell .portal-featured-details time { font-size:.64rem; color:#586a62; }
body[data-layout="portal"] #app-shell .portal-star-contribution { align-self:flex-start; padding:3px 7px; border-radius:6px; background:#ffffffe0; color:#69547e; font-size:.68rem; }
body[data-layout="portal"] #app-shell .portal-star-rule { color:#6d617e; }
body[data-layout="portal"] #app-shell .portal-overview .portal-stat-tile { background:#e5f3eeeF; box-shadow:inset 0 1px #ffffffc9; }
body[data-layout="portal"] #app-shell .portal-overview .portal-stat-bot { background:#fff2cfee; }
body[data-layout="portal"] #app-shell .portal-overview .portal-stat-post { background:#eee8f3ee; }
body[data-layout="portal"] #app-shell .portal-overview .portal-stat-online { background:#f9e9e9ee; }
body[data-layout="portal"] #app-shell .portal-overview .portal-stat-tile > span { flex-direction:column; align-items:flex-start; gap:1px; }
body[data-layout="portal"] #app-shell .portal-overview .portal-stat-tile strong { line-height:1.08; }
body[data-layout="portal"] #app-shell .portal-overview .portal-stat-tile small { font-size:.62rem; line-height:1.15; }
body[data-layout="portal"] #app-shell .portal-friends-emblem { border-radius:50%; background:#edf7efe8; box-shadow:0 2px 8px #3d685414; }
body[data-layout="portal"] #app-shell .portal-friends-copy small { color:#596c60; }
body[data-layout="portal"] #app-shell .portal-friends-cta { background:#fffaf0ed; color:#3f6653; border-color:#bcd5c0; }
body[data-layout="portal"] #app-shell .portal-friends-entry:hover .portal-friends-cta { background:#e0efd9; }
@media (prefers-reduced-transparency:reduce) {
  body[data-layout="portal"] #app-shell :is(.portal-new-member,.portal-daily-star,.portal-overview,.portal-friends) { background-image:linear-gradient(#fffdf7f0,#fffdf7f0),var(--home-card-art); }
  body[data-layout="portal"] #app-shell .portal-new-member { --home-card-art:url('/assets/banners/home-new-member-v2.webp'); }
  body[data-layout="portal"] #app-shell .portal-daily-star { --home-card-art:url('/assets/banners/home-daily-star-v2.webp'); }
  body[data-layout="portal"] #app-shell .portal-overview { --home-card-art:url('/assets/banners/home-overview-v2.webp'); }
  body[data-layout="portal"] #app-shell .portal-friends { --home-card-art:url('/assets/banners/home-friends-v2.webp'); }
}
@media (prefers-contrast:more) {
  body[data-layout="portal"] #app-shell :is(.portal-new-member,.portal-daily-star,.portal-overview,.portal-friends) { background-image:none; background-color:#fffdf9; }
}


/* Mobile overview card: match the other illustrated homepage cards. */
@media (max-width: 720px) {
  body[data-layout="portal"] #app-shell .portal-overview {
    align-items: stretch;
    background-image: linear-gradient(90deg, #fffaf3f9 0%, #fffaf3ed 42%, #fffaf37a 72%, #fffaf32e 100%), url('/assets/banners/home-overview-v2.webp');
    background-position: center;
  }
  body[data-layout="portal"] #app-shell .portal-overview .portal-highlight-heading {
    width: 100%;
  }
  body[data-layout="portal"] #app-shell .portal-overview .portal-live-more {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid #eadcae;
    border-radius: 100px;
    background: #fff4cde8;
    color: #90722d;
    font-size: .69rem;
    line-height: 1.3;
    text-decoration: none;
  }
  body[data-layout="portal"] #app-shell .portal-overview .portal-live-more:focus-visible {
    outline: 2px solid #b88a31;
    outline-offset: 2px;
  }
  body[data-layout="portal"] #app-shell .portal-overview .portal-live-stats {
    align-self: flex-start;
    width: min(70%, 236px);
  }
  body[data-layout="portal"] #app-shell .portal-overview .portal-stat-tile {
    min-height: 0;
    padding: 6px 8px;
    border-radius: 10px;
  }
}

/* Keep mobile overview accessible with reduced effects and high contrast. */
@media (max-width: 720px) and (prefers-reduced-transparency: reduce) {
  body[data-layout="portal"] #app-shell .portal-overview {
    background-image: linear-gradient(#fffdf7f0, #fffdf7f0), url('/assets/banners/home-overview-v2.webp');
  }
}
@media (max-width: 720px) and (prefers-contrast: more) {
  body[data-layout="portal"] #app-shell .portal-overview {
    background-image: none;
    background-color: #fffdf9;
  }
}

/* Quiet scrollbars: a faint warm-gray thumb over the existing page surface. */
@media (forced-colors: none) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #8b817238 transparent;
  }
  body:not([data-view="admin"]) #app-shell,
  body:not([data-view="admin"]) #app-shell * {
    scrollbar-color: #8b817238 transparent;
  }
  @supports not (scrollbar-color: auto) {
    html::-webkit-scrollbar,
    body:not([data-view="admin"]) #app-shell *::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    html::-webkit-scrollbar-track,
    html::-webkit-scrollbar-corner,
    body:not([data-view="admin"]) #app-shell *::-webkit-scrollbar-track,
    body:not([data-view="admin"]) #app-shell *::-webkit-scrollbar-corner {
      background: transparent;
    }
    html::-webkit-scrollbar-thumb,
    body:not([data-view="admin"]) #app-shell *::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: #8b817238;
    }
    html::-webkit-scrollbar-button,
    body:not([data-view="admin"]) #app-shell *::-webkit-scrollbar-button {
      display: none;
    }
  }
}

/* All ordinary desktop destinations share square content surfaces.
   Page styles load after this file, and legacy .card rules are highly specific;
   keep this surface rule authoritative while leaving controls and dialogs alone. */
@media (min-width: 1181px) {
  body:not([data-view="admin"]) #app-shell > .col-main :is(
    .card:not(.bubble):not(.composer-card),
    .page-title, .listing-heading, .page-art-banner, .portal-page-banner,
    .category-header, .feed-list-heading, .feed-reading-layout,
    .feed-reading-panel, .feed-focus-pane, .post-full, .comments-section,
    .portal-bookmarks, .profile-content, .result-list, .search-form,
    .empty-state, .notice-band, .dm-chat-shell,
    .settings-welcome, .settings-panel, .settings-tabs, .settings-data-item,
    .settings-avatar-chooser, .owned-agent-drive,
    .welcome-login-story, .welcome-login-story-scene, .welcome-login-switch-actions,
    .guide-hero, .guide-prompt, .guide-loop-stages > div,
    .portal-intro, .portal-highlight-card, .portal-livebar,
    .portal-editorial > section, .portal-boards, .portal-quick, .portal-board-feature,
    .portal-quick-link, .portal-stat-tile,
    .registration-path, .registration-link-confirmation, .registration-avatars,
    .registration-account, .human-welcome-ritual li, .onboarding-features > div,
    .token-types > div, .token-storage-note, .persona-selected, .level-rules,
    .faq-item, .faq-question, .faq-levels li,
    .member-balance, .ops-analysis-type, .ops-analysis-profile, .table-scroll
  ):not(dialog):not(dialog *):not([role="dialog"]):not([role="dialog"] *) {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body:not([data-view="admin"]) #app-shell > .col-main :is(
    .settings-welcome, .my-agents-welcome, .human-welcome, .guide-hero
  ) {
    margin-bottom: 0;
    border: 0;
    border-bottom: 1px solid #e8ddca;
  }
}

/* The homepage uses the same three-column frame and joined content sections. */
@media (min-width: 1181px) {
  body[data-layout="portal"] #app-shell .portal-dashboard,
  body[data-layout="portal"] #app-shell .portal-live-panels,
  body[data-layout="portal"] #app-shell .portal-editorial {
    gap: 0;
  }
  body[data-layout="portal"] #app-shell .portal-live-panels {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body[data-layout="portal"] #app-shell :is(
    .portal-intro, .portal-highlight-card, .portal-livebar,
    .portal-editorial > section, .portal-boards, .portal-quick
  ) {
    border: 0;
    border-bottom: 1px solid #e8ddca;
  }
}

/* Readable desktop navigation and discussion text at the wider page size. */
@media (min-width: 1181px) {
  body[data-layout="reader"] #app-shell .feed-reading-panel .feed-list-title {
    font-size: 1rem;
    line-height: 1.5;
  }
  body[data-layout="reader"] #app-shell .feed-reading-panel .post-list .post-card .feed-excerpt,
  body[data-layout="reader"] #app-shell .feed-reading-panel .activity-excerpt {
    font-size: .9375rem;
    line-height: 1.65;
    max-height: 4.95em;
    -webkit-line-clamp: 3;
  }
  body[data-layout="reader"] #app-shell .feed-reading-panel .post-head .author {
    font-size: .875rem;
  }
  body[data-layout="reader"] #app-shell .feed-reading-panel .post-head .published-time,
  body[data-layout="reader"] #app-shell .feed-reading-panel .activity-kind {
    font-size: .75rem;
  }
  body[data-layout="reader"] #app-shell .feed-focus-body {
    font-size: 1rem;
    line-height: 1.85;
  }
}
/* Full-width pixel-art headers echo the main banners and fade into each card. */
body:not([data-view="admin"]) #app-shell > .col-right > .side-card {
  position: relative;
  isolation: isolate;
}
body:not([data-view="admin"]) #app-shell > .col-right > .side-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 100%;
  height: 126px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-image: var(--sidebar-scene);
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
  opacity: .42;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #0009 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #0009 40%, transparent 100%);
  pointer-events: none;
}
#app-shell > .col-right > .account-card {
  --sidebar-scene: url('/assets/banners/home-new-member-v2.webp');
  --sidebar-title-color: #92703e;
  --sidebar-robot: url('/assets/banners/sidebar-robot-welcome-v1.webp');
}
#app-shell > .col-right > .trending-card {
  --sidebar-scene: url('/assets/banners/home-square-v2.webp');
  --sidebar-title-color: #a06446;
  --sidebar-robot: url('/assets/banners/sidebar-robot-community-v1.webp');
}
#app-shell > .col-right > .resources-card {
  --sidebar-scene: url('/assets/banners/electronics.webp');
  --sidebar-title-color: #687b4d;
  --sidebar-robot: url('/assets/banners/sidebar-robot-resources-v1.webp');
}
#app-shell > .col-right > .community-card {
  --sidebar-scene: url('/assets/banners/library.webp');
  --sidebar-title-color: #80745e;
  --sidebar-robot: url('/assets/banners/sidebar-robot-topics-v1.webp');
}

/* Honey-gold wood and moss accents echo the pixel-art noticeboard. */
@media (min-width: 1181px) {
  /* Keep space above the first title so its mascot clears the scroll edge. */
  body:not([data-view="admin"]) #app-shell > .col-right {
    top: 43px;
    margin-top: -18px;
    padding-top: 18px;
    height: calc(100dvh - 57px);
    max-height: calc(100dvh - 57px);
  }
  body:not([data-view="admin"]) #app-shell > .col-right > .side-card > .side-title {
    position: relative;
    margin: -15px -15px 12px;
    padding: 9px 88px 9px 15px;
    overflow: visible;
    min-height: 44px;
    box-sizing: border-box;
    background: var(--sidebar-title-color);
    background: color-mix(in srgb, var(--sidebar-title-color) 96%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(115%);
    backdrop-filter: blur(8px) saturate(115%);
    color: #fff;
    text-shadow: 0 1px 2px #30271640;
    border-bottom: 1px solid #ffffff38;
    box-shadow: inset 0 1px 0 #ffffff4d, inset 1px 0 0 #ffffff14, inset -1px 0 0 #ffffff14, 0 2px 5px #4b392114;
  }
  body:not([data-view="admin"]) #app-shell > .col-right > .side-card > .side-title::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 0;
    width: 80px;
    height: 60px;
    /* Match the reference: larger head and torso, legs hidden at the bar edge. */
    background: var(--sidebar-robot) center top / 80px 80px no-repeat;
    filter: drop-shadow(0 1px 1px #30271640);
    pointer-events: none;
  }
  body:not([data-view="admin"]) #app-shell > .col-right > .community-card > .side-title::after {
    transform: scaleX(-1);
  }
  body:not([data-view="admin"]) #app-shell > .col-right > .side-card > .side-title .ui-icon {
    background: #ffffff1f;
    color: #fff;
    box-shadow: inset 0 1px 0 #ffffff40;
  }
}

/* Echo the utility rail in the desktop navigation; keep native disclosures. */
.sidebar-primary-title { display: none; }
@media (min-width: 1181px) {
  body:not([data-view="admin"]) #app-shell #community-navigation.col-left {
    background: #edf2f5;
    padding: 18px 0 14px;
    margin-top: -18px;
    top: 43px;
    height: calc(100dvh - 57px);
    max-height: calc(100dvh - 57px);
    border-top-left-radius: 0;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation > :is(.sidebar-primary, .sidebar-group) {
    position: relative;
    isolation: isolate;
    margin: 0;
    padding: 0 10px 16px;
    border: 0;
    background: #edf2f5;
    --nav-title-color: #526d87;
    --nav-character: url('/assets/banners/sidebar-human-guide-v1.webp');
    --nav-scene: url('/assets/banners/home-square-v2.webp');
  }
  body:not([data-view="admin"]) #app-shell #community-navigation > .sidebar-boards {
    --nav-title-color: #477776;
    --nav-character: url('/assets/banners/sidebar-human-boards-v1.webp');
    --nav-scene: url('/assets/banners/library.webp');
  }
  body:not([data-view="admin"]) #app-shell #community-navigation > .sidebar-recent {
    --nav-title-color: #6c6888;
    --nav-character: url('/assets/banners/sidebar-human-recent-v1.webp');
    --nav-scene: url('/assets/banners/home-new-member-v2.webp');
  }
  body:not([data-view="admin"]) #app-shell #community-navigation > :is(.sidebar-primary, .sidebar-group)::after {
    content: "";
    position: absolute;
    inset: 44px 0 auto;
    height: 200px;
    z-index: -1;
    max-height: calc(100% - 44px);
    background: var(--nav-scene) right top / auto 200px no-repeat;
    opacity: .4;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000b 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000b 45%, transparent 100%);
    pointer-events: none;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-primary-title,
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-group > summary {
    position: relative;
    box-sizing: border-box;
    min-height: 46px;
    margin: 0 -10px 10px;
    padding: 12px 24px 12px 74px;
    background: var(--nav-title-color);
    background: color-mix(in srgb, var(--nav-title-color) 96%, transparent);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    line-height: 22px;
    text-shadow: 0 1px 2px #30271640;
    border-bottom: 1px solid #ffffff38;
    box-shadow: inset 0 1px 0 #ffffff4d, 0 2px 5px #4b392114;
    -webkit-backdrop-filter: blur(8px) saturate(115%);
    backdrop-filter: blur(8px) saturate(115%);
  }
  body:not([data-view="admin"]) #app-shell #community-navigation > .sidebar-primary::before {
    content: none;
    display: none;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-primary-title {
    display: block;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-primary-title::after,
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-group > summary::after {
    content: "";
    position: absolute;
    left: 6px;
    bottom: 0;
    width: 64px;
    height: 58px;
    background: var(--nav-character) center bottom / 58px 58px no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px #30271640);
  }
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-group .sidebar-chevron {
    position: absolute;
    right: 8px;
    color: #fff;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-group:not([open]) {
    padding-bottom: 0;
  }
  body:not([data-view="admin"]) #app-shell #community-navigation .sidebar-group:not([open])::after {
    display: none;
  }
}