/* Community Market website design system. Loaded after page-specific styles.
   Button intent is presentation only: it never enables or authorises an action. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #06111d;
  --card: #0d1e2d;
  --surface-raised: #10273a;
  --field: #091a29;
  --ink: #edf5ff;
  --muted: #b2c7dc;
  --line: #36536c;
  --blue: #70b8ff;
  --green: #16834b;
  --button-blue: #0965de;
  --button-green: #137443;
  --button-red: #b42335;
  --radius-card: 16px;
  --radius-control: 10px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 84px; }
body, body.site-page, body.forum-mode {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.site-page { max-width: none; width: 100%; padding: 0; }
:root[data-theme] :is(.layout, .site-page .site-content, .forum-mode) {
  background: var(--bg); color: var(--ink);
}
:root[data-theme] :is(.card, .panel, .sheet, .modal, fieldset,
  .forum-post.card, .forum-reply-box.card, .forum-board, .forum-thread,
  .venue-reviews-panel, .venue-photo-more, .discussion-options) {
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: none; min-width: 0;
}
.card, fieldset { padding: 20px; }
.card.product, .card.category { padding: 0; overflow: hidden; }
:root[data-theme] :is(.titlebar, .hero, .forum-hero, .discussion-hero) {
  background: var(--surface-raised) !important; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 24px; min-height: 0;
}
:root[data-theme] :is(.titlebar, .hero, .forum-hero, .discussion-hero) :is(h1,h2,p) {
  color: var(--ink) !important; text-shadow: none; opacity: 1;
}
h1 { font-size: clamp(25px, 3vw, 32px); line-height: 1.2; }
h2 { font-size: 23px; line-height: 1.3; }
h1,h2,h3,p,a { overflow-wrap: anywhere; }
:root[data-theme] :is(.muted, small, legend, .meta, .thread-excerpt) { color: var(--muted); }
:root[data-theme] .community-badge {
  background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line);
}
:root[data-theme] :is(.transport-stat, .transport-stat.amber, .transport-stat.green, .transport-stat.purple) {
  background: var(--surface-raised); color: var(--ink) !important; border-color: var(--line);
}
:root[data-theme] :is(.transport-menu, .transport-menu-dropdown) a.active {
  background: var(--button-blue); color: #fff;
}
:root[data-theme] :is(.product .pic, .detail-image, .animal-gallery .photo, .feedpost .photo) {
  background: var(--surface-raised); color: var(--muted);
}
:root[data-theme] :is(.error, .success) { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
:root[data-theme] :is(.text-link, .price, .thread-board, .discussion-board) { color: var(--blue) !important; }

/* Three button colours. Neutral page surfaces, notices and illustrations are
   deliberately independent of the action palette. */
:root[data-theme] :is(button, .btn, .button, .forum-start, .forum-back,
  .tab, .account-tabs a, .mobile-menu summary, .site-side summary) {
  --action-colour: var(--button-blue);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; max-width: 100%; padding: 11px 16px;
  border: 1px solid var(--action-colour) !important;
  border-radius: var(--radius-control); background: var(--action-colour) !important;
  color: #fff !important; font: inherit; font-weight: 700; line-height: 1.4;
  text-decoration: none; box-shadow: none; cursor: pointer;
}
:root[data-theme] :is(button, .btn, .button)[data-intent="positive"],
:root[data-theme] :is(button, .btn, .button).positive {
  --action-colour: var(--button-green);
}
:root[data-theme] :is(button, .btn, .button)[data-intent="danger"],
:root[data-theme] :is(button, .btn, .button).danger {
  --action-colour: var(--button-red);
}
:root[data-theme] :is(button, .btn, .button):disabled {
  opacity: .55; cursor: not-allowed;
}
:root[data-theme] :is(button, .btn, .button):hover:not(:disabled) { filter: brightness(1.12); }
:root[data-theme] :is(.btn, .button, button)[aria-pressed="true"],
:root[data-theme] .account-tabs [aria-selected="true"] {
  box-shadow: inset 0 -3px 0 #fff; font-weight: 800;
}
:root[data-theme] :is(.saved-item-active, .saved-place-active) {
  --action-colour: var(--button-blue);
  background: var(--button-blue) !important; color: #fff !important;
  border-color: #fff !important; box-shadow: inset 0 -3px 0 #fff;
}
:root[data-theme] .account-choice[data-menu-color] {
  background: var(--surface-raised); border: 1px solid var(--line);
  border-left: 4px solid var(--button-blue); color: var(--ink);
}
:root[data-theme] .account-choice[data-menu-color] .community-account-icon {
  background: var(--button-blue); color: #fff;
}
:root[data-theme] .button.animal-type-tab {
  background: var(--button-blue) !important; border-color: var(--button-blue) !important;
}

/* Native selects retain keyboard and screen-reader behaviour. */
:root[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  display: block; width: 100%; min-width: 0; max-width: 100%;
  min-height: 48px; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-control); background: var(--field); color: var(--ink);
  font: inherit; line-height: 1.5; box-shadow: none;
}
:root[data-theme] select:not([multiple]):not([size]) { height: 48px; padding-right: 30px; }
:root[data-theme] option { background: var(--field); color: var(--ink); }
:root[data-theme] textarea { min-height: 120px; resize: vertical; }
:root[data-theme] input:is([type="radio"], [type="checkbox"]) {
  width: 20px; height: 20px; min-width: 20px; min-height: 20px;
  padding: 0; margin: 0 8px 0 0; accent-color: var(--button-blue); vertical-align: middle;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
label { line-height: 1.5; }
:root[data-theme] :is(input, textarea, select):focus { border-color: var(--blue); }
:root[data-theme] :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--blue); outline-offset: 3px;
}
details > summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: var(--blue); }
:root[data-theme] :is(.dropdown, .mobile-menu nav, .forum-board-menu a) {
  background: var(--card); color: var(--ink); border-color: var(--line);
}

/* Same header, sidebar sizing and page gutters on each website surface. */
:root[data-theme] :is(.top, .site-top) {
  height: 68px; padding: 0 24px; gap: 18px; background: #081c2d !important;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
:root[data-theme] :is(.logo, .site-logo) { color: var(--ink); font-size: 22px; letter-spacing: 0; }
:root[data-theme] .logo::before { content: none; }
.site-logo strong { font-size: inherit; }
:root[data-theme] :is(.top .search, .site-search) { display: flex; flex: 1; max-width: 600px; min-width: 0; }
:root[data-theme] :is(.top .search input, .site-search input) { border-radius: 24px; padding-right: 48px; }
:root[data-theme] .site-search button { right: 4px; top: 4px; min-height: 40px; width: 40px; padding: 4px; border-radius: 50%; }
:root[data-theme] :is(.iconbtn, .header-auth, .header-profile, .site-actions a, .site-actions button) {
  background: var(--button-blue) !important; color: #fff !important;
  min-height: 44px; border-radius: 24px; border: 0;
}
:root[data-theme] .forum-mode .top a[href="#messages"] { display: inline-flex; }
:root[data-theme] :is(.side, .site-side) { background: var(--field) !important; color: var(--ink); }
:root[data-theme] :is(.nav a, .site-side a) { color: var(--ink); min-height: 48px; border-radius: 10px; }
:root[data-theme] :is(.nav a, .site-side a):is(:hover, .active) { background: #103c64 !important; color: #fff !important; }
.layout, .forum-mode .layout { max-width: 1500px; grid-template-columns: 245px minmax(0,1fr) 280px; }
.forum-mode .right { display: block; }
main, .forum-mode main { padding: 24px; min-width: 0; }
:root[data-theme] .right { background: var(--field); }
.site-side { width: 245px; }
.site-side summary { display: none !important; }
.forum-page { max-width: none; }
.forum-columns { grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); align-items: start; }
.forum-board-selector { align-self: start; align-content: start; grid-template-rows: auto auto; }
.forum-board-selector select { align-self: start; }
.forum-board-page { grid-template-columns: minmax(0, 1fr); }
.toolbar, .tabs, .subnav, .header-actions { gap: 10px; }
.compact-search, .browse-search { align-items: end; }
.browse-search button { align-self: end; }
.site-page .support-panel { max-width: 760px; border-radius: var(--radius-card); }
.site-page .support-panel input[type="number"] { width: 100%; height: auto; }
.support-panel fieldset label { display: flex; align-items: center; gap: 10px; }
.site-page .support-panel label { background: var(--field); }
.standalone-content { max-width: 980px !important; }
.standalone-content > h1 { margin-top: 12px; }
.standalone-content > a { color: var(--blue); }
.notice { color: var(--ink); background: #302c1d; border: 1px solid #8d723b; }
:root[data-theme] [hidden] { display: none !important; }

@media (max-width: 1100px) {
  .layout, .forum-mode .layout { grid-template-columns: 220px minmax(0,1fr); }
  .right, .forum-mode .right { display: none; }
  .site-side { width: 220px; }
  .forum-columns { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  :root[data-theme] :is(.top, .site-top) { height: 60px; padding: 0 12px; gap: 8px; }
  :root[data-theme] :is(.logo, .site-logo) { font-size: 17px; min-width: 0; }
  :root[data-theme] .logo { white-space: normal; line-height: 1.2; }
  :is(.logo, .site-logo) img { width: 30px; height: 30px; flex-shrink: 0; }
  :root[data-theme] .iconbtn { width: 36px; padding: 4px; flex-shrink: 0; }
  :root[data-theme] :is(.top .search, .site-search) { display: none; }
  :root[data-theme] :is(.site-actions a, .site-actions button, .header-auth) { padding: 8px; font-size: 13px; }
  .layout, .forum-mode .layout { display: block; }
  .side, .forum-mode .side { display: none; }
  main, .forum-mode main { padding: 18px 12px calc(96px + env(safe-area-inset-bottom)); }
  .forum-mode .mobile-menu { display: block; }
  .site-side { width: auto; }
  .site-page .site-content { margin: 0; padding: 18px 12px 32px; }
  .site-side summary { display: flex !important; width: 100%; margin: 8px 0; }
  .site-side details:not([open]) nav { display: none; }
  .card, fieldset { padding: 16px; }
  :root[data-theme] :is(.titlebar, .hero, .forum-hero, .discussion-hero) { margin: 0 0 16px; padding: 20px; border-radius: var(--radius-card); }
  .forum-columns, .cards, .two, .three, .health-grid { grid-template-columns: minmax(0,1fr); }
  .toolbar > *, .header-actions > * { min-width: 0; max-width: 100%; }
  .account-tabs { flex-wrap: wrap; }
  :root[data-theme] .mobilebar { background: var(--card) !important; padding-bottom: env(safe-area-inset-bottom); }
  :root[data-theme] .mobilebar a { font-size: 12px; min-height: 48px; color: var(--ink) !important; }
  .forum-mode { padding-bottom: 0; }
  .forum-hero h1 { font-size: 28px; }
  .forum-hero p, .forum-hero h1 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* Layered important declarations outrank historical unlayered important rules
   (hero, saved-item and account colours) without growing selector specificity. */
@layer cm-action-colours {
  :root[data-theme] :is(button, .btn, .button, .forum-start, .forum-back,
    .tab, .account-tabs a, .mobile-menu summary, .site-side summary) {
    background: var(--button-blue) !important;
    border-color: var(--button-blue) !important;
    color: #fff !important;
  }
  :root[data-theme] :is(button, .btn, .button)[data-intent="positive"],
  :root[data-theme] :is(button, .btn, .button).positive,
  :root[data-theme] .btn.saved-item-active,
  :root[data-theme] .btn.saved-place-active {
    background: var(--button-green) !important;
    border-color: var(--button-green) !important;
  }
  :root[data-theme] :is(button, .btn, .button)[data-intent="danger"],
  :root[data-theme] :is(button, .btn, .button).danger {
    background: var(--button-red) !important;
    border-color: var(--button-red) !important;
  }
}