/* Keep the shared section title and account switcher compact on this page. */
#appShell:has(.db-board) .main { min-width: 0; }
#appShell:has(.db-board) .topbar { align-items: center; margin-bottom: 18px; }
#appShell:has(.db-board) .topbar h1 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.025em; }
#appShell:has(.db-board) .topbar::after { display: none; }
#appShell:has(.db-board) #pageDescription { display: none; }

.db-board {
  --db-ink: #26354c;
  --db-muted: #748196;
  --db-line: #e4eaf2;
  --db-blue: #426ab6;
  color: var(--db-ink);
  font-family: inherit;
  min-width: 0;
}

.db-board *, .db-board *::before, .db-board *::after { box-sizing: border-box; }
.db-board [hidden] { display: none !important; }
.db-board h2, .db-board h3, .db-board p { margin: 0; }
.db-board button, .db-board input, .db-board select, .db-board textarea { font: inherit; }
.db-board button { width: auto; margin: 0; transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; }
.db-board button:disabled { cursor: wait; opacity: .6; }
.db-board button:focus-visible, .db-board a:focus-visible, .db-board input:focus-visible,
.db-board textarea:focus-visible, .db-board select:focus-visible { outline: 3px solid #9eb9eb; outline-offset: 3px; }
.db-board .db-icon { display: block; width: 19px; height: 19px; flex: 0 0 auto; }
.db-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.db-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 1px 0 21px; }
.db-heading > div { min-width: 0; }
.db-heading .db-eyebrow { font-size: 10px; font-weight: 750; letter-spacing: .14em; color: #8795ab; margin-bottom: 8px; }
.db-heading h2 { color: #26354c; font-size: clamp(23px, 2.15vw, 29px); font-weight: 730; line-height: 1.25; letter-spacing: -.035em; }
.db-heading .db-intro { color: var(--db-muted); font-size: 13px; line-height: 1.7; margin-top: 7px; }
.db-board .db-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 11px; min-height: 41px; padding: 10px 14px; font-size: 12px; line-height: 1.4; font-weight: 650; text-decoration: none; white-space: nowrap; }
.db-board .db-button .db-icon { width: 17px; height: 17px; }
.db-board .db-button-primary { background: #426ab6; border-color: #426ab6; color: #fff; box-shadow: 0 4px 10px #426ab612; }
.db-board .db-button-primary:hover { background: #365da4; border-color: #365da4; }
.db-board .db-button-secondary { color: #526986; background: #f9fbfe; border-color: #dce5f0; }
.db-board .db-button-secondary:hover { background: #edf3fb; border-color: #c4d4e9; }
.db-board .db-button-quiet { color: #7a879a; background: transparent; }
.db-board .db-button-quiet:hover { color: #3e5878; background: #f0f4fa; }
.db-heading > .db-button { flex: 0 0 auto; }

.db-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 22px; }
.db-stat { display: flex; align-items: center; gap: 14px; padding: 18px 21px; min-width: 0; border: 1px solid #e1e8f2; border-radius: 16px; background: #ffffffed; box-shadow: 0 4px 15px #253c5c03; }
.db-stat-icon { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; border-radius: 13px; background: #edf3fe; color: #5d80bd; }
.db-stat-icon .db-icon { width: 22px; height: 22px; }
.db-stat[data-tone="purple"] .db-stat-icon { background: #f2edfa; color: #9377b3; }
.db-stat[data-tone="teal"] .db-stat-icon { background: #eaf5f0; color: #5a9a8b; }
.db-stat > div { display: grid; min-width: 0; gap: 5px; }
.db-stat > div > span { font-size: 11px; line-height: 1.5; color: #7c899c; }
.db-stat strong { font-size: 29px; line-height: 1.1; letter-spacing: -.035em; font-weight: 720; font-variant-numeric: tabular-nums; color: #2f4059; }

.db-composer { margin-bottom: 22px; padding: 23px; background: #fff; border: 1px solid #d9e4f3; border-radius: 19px; box-shadow: 0 8px 28px #426ab607; }
.db-composer > header { display: flex; gap: 13px; align-items: center; margin-bottom: 21px; }
.db-composer-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #eef3fc; color: #6a88b6; flex: 0 0 auto; }
.db-composer h3 { font-size: 16px; line-height: 1.4; color: #30435e; font-weight: 700; }
.db-composer header p { font-size: 12px; color: #8a95a5; line-height: 1.6; margin-top: 3px; }
.db-composer form, .db-composer fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.db-composer fieldset { display: grid; gap: 16px; }
.db-composer label { display: block; font-size: 12px; font-weight: 650; color: #5d6d84; line-height: 1.6; }
.db-composer .db-optional { margin-left: 5px; color: #9ba5b4; font-weight: 400; font-size: 11px; }
.db-composer input, .db-composer textarea { display: block; width: 100%; margin: 7px 0 0; padding: 11px 13px; color: #34465e; background: #fcfdff; border: 1px solid #dce5ef; border-radius: 10px; font-size: 13px; line-height: 1.6; box-shadow: none; }
.db-composer input::placeholder, .db-composer textarea::placeholder { color: #a1acbd; font-weight: 400; }
.db-composer textarea { resize: vertical; min-height: 93px; }
.db-composer footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 1px; }
.db-composer footer > div { display: flex; gap: 7px; align-items: center; }
.db-composer .db-composer-note { display: inline-flex; gap: 7px; align-items: center; font-size: 11px; line-height: 1.5; color: #8b98aa; }
.db-composer-note .db-icon { width: 15px; height: 15px; }
.db-composer .db-form-error { background: #fff3ef; border: 1px solid #f1dcd4; border-radius: 9px; padding: 10px 12px; color: #a06651; font-size: 12px; line-height: 1.6; }

.db-feed { background: #fff; border: 1px solid #e1e7ef; border-radius: 21px; box-shadow: 0 6px 24px #273e5c04; overflow: hidden; }
.db-filterbar { padding: 19px 22px 18px; border-bottom: 1px solid #edf1f6; }
.db-sources { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #d8e1ed transparent; padding: 3px 3px 8px; margin: -3px -3px 11px; }
.db-board .db-source { --db-source: #5477b5; --db-source-tint: #edf3fd; display: inline-flex; align-items: center; flex: 0 0 auto; justify-content: center; gap: 7px; min-height: 39px; padding: 8px 10px; background: transparent; color: #8190a4; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 550; line-height: 1.4; white-space: nowrap; }
.db-source .db-icon { width: 16px; height: 16px; }
.db-source small { min-width: 20px; padding: 2px 4px; text-align: center; border-radius: 5px; font-size: 10px; font-variant-numeric: tabular-nums; color: #96a2b1; background: #f0f3f7; }
.db-board .db-source:hover { background: #f7f9fc; color: #576b87; }
.db-board .db-source[aria-pressed="true"] { background: var(--db-source-tint); border-color: var(--db-source-tint); color: var(--db-source); font-weight: 700; }
.db-source[aria-pressed="true"] small { color: var(--db-source); background: #ffffffa8; }
.db-source[data-db-category="bbp"] { --db-source: #4d9388; --db-source-tint: #eaf5f1; }
.db-source[data-db-category="training"] { --db-source: #8c6db2; --db-source-tint: #f3edfa; }
.db-source[data-db-category="sport"] { --db-source: #518f9c; --db-source-tint: #eaf5f7; }
.db-source[data-db-category="manual"] { --db-source: #b58d4c; --db-source-tint: #fbf5e8; }
.db-query-row { display: grid; grid-template-columns: minmax(0, 1fr) 185px; gap: 12px; }
.db-search, .db-period { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 42px; padding: 0 12px; background: #f8fafc; border: 1px solid #e5ebf3; border-radius: 11px; color: #93a1b6; }
.db-search:focus-within, .db-period:focus-within { background: #fff; border-color: #a6bee1; box-shadow: 0 0 0 3px #edf3fc; }
.db-search > .db-icon, .db-period > .db-icon { width: 17px; height: 17px; }
.db-search input { flex: 1; min-width: 0; width: 100%; margin: 0; border: 0; padding: 11px 0; background: transparent; color: #4b5c73; box-shadow: none; font-size: 12px; line-height: 1.4; }
.db-search input::-webkit-search-cancel-button { display: none; }
.db-search input::placeholder { color: #9aa6b6; }
.db-search input:focus-visible { outline: none; }
.db-board .db-search-clear { display: grid; place-items: center; width: 24px; height: 24px; min-width: 24px; padding: 3px; background: #eaf0f7; color: #8998ae; border: 0; border-radius: 7px; }
.db-search-clear .db-icon { width: 14px; height: 14px; }
.db-period { position: relative; padding-right: 10px; }
.db-period select { appearance: none; border: 0; background: transparent; color: #6c7c93; box-shadow: none; min-width: 0; width: 100%; padding: 11px 24px 11px 0; margin: 0; font-size: 12px; cursor: pointer; }
.db-period select:focus-visible { outline: none; }
.db-period > .db-icon:last-child { position: absolute; right: 10px; width: 14px; height: 14px; pointer-events: none; }

.db-results-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 67px; padding: 19px 23px 14px; }
.db-results-top h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #485971; font-size: 13px; font-weight: 700; }
.db-results-top h3 span { font-size: 11px; color: #9aa5b5; font-weight: 400; }
.db-live { font-size: 10px; color: #8a9fbd; line-height: 1.5; }
.db-results { padding: 0 23px 22px; }
.db-day { position: relative; padding-left: 23px; }
.db-day::before { content: ""; position: absolute; left: 4px; top: 19px; bottom: -20px; width: 1px; background: #e4ebf4; }
.db-day:last-child::before { bottom: 16px; }
.db-day + .db-day { margin-top: 25px; }
.db-day-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 28px; padding: 0 0 12px; }
.db-day-dot { position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border: 2px solid #c7d5e8; border-radius: 50%; background: #fff; }
.db-day-dot.is-today { background: #7398d1; border-color: #7398d1; box-shadow: 0 0 0 4px #edf3fd; }
.db-day-heading h3 { font-size: 12px; font-weight: 700; color: #5e728e; }
.db-day-date { font-size: 10px; color: #9da8b7; line-height: 1.5; }
.db-day-count { margin-left: auto; font-size: 10px; color: #9aa7b9; line-height: 1.5; }
.db-event-list { list-style: none; padding: 0; margin: 0; border: 1px solid #e7edf4; border-radius: 15px; background: #fdfefe; }
.db-event { --db-event-ink: #6c8bbb; --db-event-tint: #edf3fd; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 13px; padding: 18px; min-width: 0; }
.db-event + .db-event { border-top: 1px solid #edf1f6; }
.db-event[data-source="bbp"] { --db-event-ink: #639a8e; --db-event-tint: #edf6f2; }
.db-event[data-source="training"] { --db-event-ink: #9c83b9; --db-event-tint: #f4effa; }
.db-event[data-source="sport"] { --db-event-ink: #649da7; --db-event-tint: #edf6f8; }
.db-event[data-source="manual"] { --db-event-ink: #bb985e; --db-event-tint: #fbf6ea; }
.db-event-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; color: var(--db-event-ink); background: var(--db-event-tint); }
.db-event-icon .db-icon { width: 19px; height: 19px; }
.db-event-body { min-width: 0; }
.db-event-top { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 6px 13px; margin: 1px 0 6px; }
.db-type { color: var(--db-event-ink); background: var(--db-event-tint); padding: 3px 6px; border-radius: 5px; font-size: 10px; font-weight: 650; line-height: 1.35; }
.db-event time { color: #a6b1bf; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.5; margin-left: auto; }
.db-event h3 { color: #3e506a; font-size: 15px; line-height: 1.6; font-weight: 650; overflow-wrap: anywhere; }
.db-event .db-event-description { color: #8794a6; font-size: 13px; line-height: 1.75; margin: 5px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.db-event-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 18px; margin-top: 11px; }
.db-context { display: inline-flex; align-items: flex-start; gap: 5px; min-width: 0; color: #92a1b4; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.db-context .db-icon { width: 13px; height: 13px; margin-top: 1px; }
.db-board .db-event-link { display: inline-flex; gap: 5px; align-items: center; color: #6d8fbe; font-size: 11px; font-weight: 600; line-height: 1.6; text-decoration: none; white-space: nowrap; margin-left: auto; }
.db-event-link .db-icon { width: 13px; height: 13px; }
.db-event-link:hover { color: #3564aa; text-decoration: underline; text-underline-offset: 3px; }
.db-feed-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; min-height: 72px; padding: 15px 23px; border-top: 1px solid #edf1f6; background: #fdfefe; }
.db-feed-footer > span { color: #9aa7b8; font-size: 10px; line-height: 1.6; }
.db-feed-footer .db-load-more-error { flex-basis: 100%; color: #a57660; font-size: 12px; line-height: 1.6; }

.db-empty { display: grid; justify-items: center; gap: 13px; padding: 38px 20px 43px; text-align: center; }
.db-empty-symbol { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 21px; color: #94afd3; background: #f0f5fc; margin-bottom: 3px; }
.db-empty-symbol .db-icon { width: 31px; height: 31px; stroke-width: 1.3; }
.db-empty h3 { color: #586e8b; font-size: 18px; letter-spacing: -.02em; line-height: 1.4; font-weight: 650; }
.db-empty p { max-width: 380px; color: #9aa6b7; font-size: 12px; line-height: 1.8; }
.db-empty .db-button { margin-top: 5px; }
.db-error { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; padding: 17px; margin-bottom: 20px; background: #fff9f5; border: 1px solid #f1e3d9; border-radius: 13px; color: #ae896c; }
.db-error > .db-icon { width: 23px; height: 23px; flex: 0 0 auto; }
.db-error > div { flex: 1 1 220px; min-width: 0; }
.db-error strong { font-size: 12px; color: #96775f; font-weight: 650; }
.db-error p { font-size: 11px; line-height: 1.7; margin-top: 4px; color: #aa9584; }
.db-skeleton { display: grid; gap: 10px; padding: 0 0 4px; }
.db-skeleton-row { display: flex; gap: 15px; align-items: flex-start; padding: 23px 19px; border: 1px solid #edf1f7; border-radius: 14px; }
.db-skeleton-row > i { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; background: #f0f4fa; }
.db-skeleton-row > div { display: grid; gap: 11px; flex: 1; padding-top: 3px; }
.db-skeleton-row span { display: block; width: 42%; height: 7px; background: #f0f4fa; border-radius: 5px; }
.db-skeleton-row span:nth-child(2) { width: 76%; height: 11px; }
.db-skeleton-row span:nth-child(3) { width: 58%; }
.db-skeleton { animation: db-pulse 1.8s ease-in-out infinite; }
.db-icon.is-spinning { animation: db-spin 1.2s linear infinite; }
@keyframes db-pulse { 50% { opacity: .55; } }
@keyframes db-spin { to { transform: rotate(360deg); } }

@media (max-width: 800px) {
  .db-heading { align-items: flex-start; gap: 16px; }
  .db-heading .db-intro { font-size: 12px; }
  .db-stat { gap: 10px; padding: 15px; }
  .db-stat-icon { width: 36px; height: 36px; border-radius: 11px; }
  .db-stat strong { font-size: 26px; }
  .db-composer footer { flex-wrap: wrap; }
  .db-composer footer > div { margin-left: auto; }
}

@media (max-width: 580px) {
  #appShell:has(.db-board) .topbar { margin-bottom: 16px; }
  #appShell:has(.db-board) .topbar h1 { font-size: 18px; }
  .db-heading { flex-wrap: wrap; gap: 14px; margin-bottom: 17px; }
  .db-heading > div { flex-basis: 100%; }
  .db-heading h2 { font-size: 24px; }
  .db-heading .db-eyebrow { font-size: 9px; letter-spacing: .13em; }
  .db-heading > .db-button { min-height: 39px; padding: 9px 12px; font-size: 11px; }
  .db-stats { gap: 8px; margin-bottom: 18px; }
  .db-stat { display: block; padding: 13px; border-radius: 13px; }
  .db-stat-icon { width: 27px; height: 27px; border-radius: 8px; margin-bottom: 12px; }
  .db-stat-icon .db-icon { width: 15px; height: 15px; }
  .db-stat > div { display: flex; flex-direction: column-reverse; gap: 6px; }
  .db-stat > div > span { min-height: 30px; font-size: 10px; line-height: 1.5; }
  .db-stat strong { font-size: 24px; }
  .db-feed { border-radius: 17px; }
  .db-filterbar { padding: 14px; }
  .db-sources { padding-bottom: 9px; margin-bottom: 9px; gap: 4px; }
  .db-board .db-source { min-height: 37px; padding: 8px; gap: 5px; font-size: 11px; }
  .db-source .db-icon { width: 14px; height: 14px; }
  .db-source small { font-size: 9px; min-width: 17px; }
  .db-query-row { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .db-search, .db-period { gap: 6px; min-height: 40px; padding-left: 9px; }
  .db-search > .db-icon, .db-period > .db-icon { width: 15px; height: 15px; }
  .db-search input, .db-period select { font-size: 16px; }
  .db-period { width: 100%; }
  .db-period select { padding-right: 17px; }
  .db-search { padding-right: 7px; }
  .db-board .db-search-clear { width: 20px; min-width: 20px; height: 22px; }
  .db-results-top { min-height: 61px; padding: 17px 15px 13px; }
  .db-results-top h3 { gap: 7px; font-size: 12px; }
  .db-results-top h3 span, .db-live { font-size: 9px; }
  .db-results { padding: 0 14px 18px; }
  .db-day { padding-left: 15px; }
  .db-day::before { left: 3px; }
  .db-day-dot { width: 7px; height: 7px; top: 4px; }
  .db-day-heading { gap: 5px 7px; padding-bottom: 10px; }
  .db-day-heading h3 { font-size: 12px; }
  .db-day-date { font-size: 10px; }
  .db-day-count { display: none; }
  .db-event { grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 13px 11px; }
  .db-event-icon { width: 28px; height: 28px; border-radius: 9px; }
  .db-event-icon .db-icon { width: 16px; height: 16px; }
  .db-event-top { gap: 5px; margin-bottom: 6px; }
  .db-type { font-size: 10px; padding: 3px 5px; }
  .db-event time { font-size: 10px; }
  .db-event h3 { font-size: 14px; line-height: 1.65; }
  .db-event .db-event-description { font-size: 12px; line-height: 1.7; }
  .db-event-footer { gap: 7px; margin-top: 9px; }
  .db-context, .db-board .db-event-link { font-size: 10px; }
  .db-feed-footer { padding: 13px 15px; }
  .db-feed-footer > span { font-size: 11px; }
  .db-feed-footer .db-button { font-size: 12px; min-height: 39px; padding: 8px 10px; }
  .db-empty { padding: 30px 8px; }
  .db-empty h3 { font-size: 16px; }
  .db-empty p { font-size: 11px; }
  .db-composer { padding: 17px; border-radius: 16px; margin-bottom: 18px; }
  .db-composer > header { align-items: flex-start; }
  .db-composer h3 { font-size: 14px; }
  .db-composer header p { font-size: 11px; }
  .db-composer input, .db-composer textarea { font-size: 16px; }
  .db-composer .db-composer-note { font-size: 10px; }
  .db-composer footer > div { width: 100%; justify-content: flex-end; }
  .db-composer .db-button { font-size: 11px; padding: 10px 11px; }
  .db-error { padding: 14px; gap: 10px; }
  .db-error > div { flex-basis: calc(100% - 36px); }
  .db-error .db-button { margin-left: 33px; }
}

@media (max-width: 359px) {
  .db-query-row { grid-template-columns: minmax(0, 1fr); }
  .db-period { max-width: 100%; }
  .db-stat { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .db-skeleton, .db-icon.is-spinning { animation: none; }
}