/* HubSpot CLASSIC — deals board (Kanban / "board view"). Study copy for internal education. Not for shipping.
   MEASURED on HubSpot's own Knowledge Base recordings (classic Lexend era, 2023-24, drawn at 100%):
   "navigate-board-view-1.gif", "change-deal-stage.gif", "bulk-edit-board-view.gif" (articles "Manage records in board view",
   "Select properties to show on records in board view", "Customize board and card view").
   Colours are HubSpot's named Canvas colours (light) and the HubSpot classic dark palette from hubspot-dark.css (ours: HubSpot
   never shipped a classic dark mode). Load after hubspot-tokens.css, hubspot-ui.css, hubspot.css (and hubspot-dark.css). */

.hb {
  --hb-page: #ffffff; --hb-bar: #f5f8fa;          /* gypsum: tabs bar, column headers, collapsed stage */
  --hb-card: #eaf0f6;                              /* koala: board cards */
  --hb-card-hover: #ffffff;                        /* the card under the mouse turns white */
  --hb-line: #dfe3eb;                              /* great white: column and row lines */
  --hb-line-strong: #cbd6e2;                       /* battleship: inputs, active view switch */
  --hb-text: #33475b; --hb-sub: #516f90; --hb-link: #0091ae; --hb-teal: #00a4bd;
  --hb-chip: #e5f5f8; --hb-btn: #eaf0f6; --hb-scroll: #7c7c7c;
  --hb-insight-shadow: 0 1px 5px rgba(45, 62, 80, .12);
  position: relative; overflow: hidden; background: var(--hb-page); color: var(--hb-text);
  font-family: var(--trellis-typography-body-100-font-family); font-feature-settings: "ss01"; font-weight: 300; font-size: 14px; line-height: 20px;
}
.hs-dark .hb {
  --hb-page: #253342; --hb-bar: #22303e; --hb-card: #2d3e50; --hb-card-hover: #33475b; --hb-line: #425b76; --hb-line-strong: #516f90;
  --hb-text: #eaf0f6; --hb-sub: #b0c1d4; --hb-link: #7fd1de; --hb-teal: #7fd1de; --hb-chip: rgba(0, 164, 189, .18); --hb-btn: #33475b; --hb-scroll: #7c98b6;
  --hb-insight-shadow: 0 0 0 1px #425b76;
}
.hb * { box-sizing: border-box; }
:where(.hb) button { font: inherit; color: inherit; }
.hb [hidden] { display: none !important; }
.hb .hb-link, .hb-save, .hb-tool { white-space: nowrap; }
.hb .private-icon { font-family: spacesword; font-weight: 400; font-style: normal; line-height: 1; }
.hb a, .hb .hb-link { color: var(--hb-link); text-decoration: none; font-weight: 600; cursor: pointer; }
.hb a:hover, .hb .hb-link:hover { text-decoration: underline; }
.hb .hb-abs { position: absolute; }

/* ---------- page head ---------- */
.hb-title { position: absolute; left: 25px; top: 4px; margin: 0; display: flex; align-items: center; gap: 8px; color: var(--hb-link); font-size: 22px; line-height: 36px; font-weight: 600; cursor: pointer; }
.hb-title .private-dropdown__caret, .hb-caret { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; vertical-align: middle; }
.hb-head-btns { position: absolute; right: 16px; top: 8px; display: flex; gap: 14px; }
.hb-head-btns .private-button { height: 32px; min-height: 32px; padding: 0 15px; font-size: 13px; line-height: 30px; font-weight: 300; }
.hb-head-btns .private-button--secondary { color: #ff7a59; border: 1px solid #ff7a59; background: transparent; }
.hb-head-btns .private-button--secondary:hover { background: #fff1ee; }
.hs-dark .hb-head-btns .private-button--secondary:hover { background: rgba(255,122,89,.12); }

/* ---------- view tabs ---------- */
.hb-tabs { position: absolute; left: 25px; right: 0; top: 48px; height: 41px; display: flex; align-items: stretch; box-shadow: inset 0 -1px 0 var(--hb-line); }
.hb-tab { position: relative; width: 128px; flex: none; display: flex; align-items: center; padding: 0 16px; border: 1px solid var(--hb-line); border-right-width: 0; background: var(--hb-bar); cursor: pointer;
  font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .15s ease-out; }
.hb-tab:last-of-type { border-right-width: 1px; }
.hb-tab:hover { background: var(--hb-page); }
.hb-tab[aria-selected="true"] { background: var(--hb-page); border-bottom-color: var(--hb-page); }
.hb-tab .hb-x { margin-left: auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 3px; color: var(--hb-text); }
.hb-tab .hb-x:hover { background: var(--hb-btn); }
.hb-tab-name { overflow: hidden; text-overflow: ellipsis; }
.hb-addview { margin-left: 14px; display: flex; align-items: center; gap: 8px; }
.hb-allviews { margin-left: 34px; display: flex; align-items: center; }

/* ---------- toolbar ---------- */
.hb-tools { position: absolute; left: 25px; right: 16px; top: 100px; height: 40px; display: flex; align-items: center; }
.hb-switch { display: flex; height: 31px; align-self: flex-start; }
.hb-switch button { width: 31px; height: 31px; border: 1px solid var(--hb-line-strong); background: var(--hb-btn); display: grid; place-items: center; cursor: pointer; padding: 0; }
.hb-switch button:first-child { border-radius: 3px 0 0 3px; }
.hb-switch button:last-child { border-radius: 0 3px 3px 0; border-left: 0; }
.hb-switch button[aria-pressed="true"] { background: var(--hb-line-strong); }
.hb-switch .private-icon { font-size: 14px; }
.hb-pipe { margin-left: 13px; width: 199px; height: 31px; align-self: flex-start; display: flex; align-items: center; padding: 0 14px 0 9px; border: 1px solid var(--hb-line-strong); border-radius: 3px; background: var(--hb-btn);
  font-size: 13px; color: var(--hb-sub); cursor: pointer; }
.hb-pipe .hb-caret { margin-left: auto; color: var(--hb-text); }
.hb-chip { margin-left: 13px; height: 40px; display: flex; align-items: center; gap: 0; padding: 0 0 0 13px; border-radius: 3px; background: var(--hb-chip); }
.hb-chip .hb-link { display: flex; align-items: center; gap: 9px; }
.hb-chip .hb-x { width: 28px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--hb-sub); cursor: pointer; margin-left: 7px; }
.hb-tool { display: flex; align-items: center; gap: 9px; margin-left: 25px; white-space: nowrap; }
.hb-tool .private-icon { font-size: 15px; color: var(--hb-sub); }
.hb-info { font-family: spacesword; font-size: 12px; color: var(--hb-sub); font-weight: 400; }
.hb-save { margin-left: auto; height: 31px; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 16px; border: 1px solid var(--hb-line-strong); border-radius: 3px; background: var(--hb-btn); color: var(--hb-sub); font-size: 13px; cursor: pointer; }
.hb .hb-bopts, .hb .hb-save, .hb .hb-pipe { font-size: 13px; }
.hb-save .private-icon { font-size: 13px; }

/* ---------- insights ---------- */
.hb-ins { position: absolute; left: 25px; right: 16px; top: 158px; height: 149px; display: grid; grid-template-columns: repeat(6, 1fr); padding: 26px 0 0; background: var(--hb-page); border-radius: 3px; box-shadow: var(--hb-insight-shadow); transition: opacity .2s ease-out; }
.hb-ins > div { text-align: center; }
.hb-ins b .hb-info { text-transform: none; letter-spacing: 0; vertical-align: 1px; }
.hb-ins b { display: block; font-size: 11.5px; line-height: 14px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.hb-ins .n { display: block; margin-top: 6px; font-size: 26px; line-height: 36px; font-weight: 300; }
.hb-ins small { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; }
.hb.no-ins .hb-ins { display: none; }

/* ---------- board ---------- */
.hb-board { position: absolute; left: 25px; right: 16px; top: 332px; bottom: 22px; border: 1px solid var(--hb-line); display: flex; flex-direction: column; background: var(--hb-page); transition: top .2s ease-out; }
.hb.no-ins .hb-board { top: 158px; }
.hb-bhead { height: 46px; flex: none; display: flex; align-items: center; padding: 0 4px 0 4px; }
.hb-search { width: 251px; height: 35px; display: flex; align-items: center; border: 1px solid var(--hb-line-strong); border-radius: 3px; background: var(--hb-page); padding: 0 10px; }
.hb-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17.5px; color: var(--hb-text); }
.hb-search input::placeholder { color: #7c98b6; }
.hb-search .private-icon { color: var(--hb-teal); font-size: 17px; font-weight: 700; }
.hb-search:focus-within { border-color: rgba(0, 208, 228, .5); box-shadow: 0 0 4px 1px rgba(0, 208, 228, .3), 0 0 0 1px #00d0e4; }
.hb-bopts { margin-left: auto; height: 29px; display: flex; align-items: center; gap: 7px; padding: 0 11px 0 15px; border: 1px solid var(--hb-line-strong); border-radius: 3px; background: var(--hb-page); color: var(--hb-text); font-size: 13px; cursor: pointer; }
.hb-bulk { display: none; height: 46px; align-items: center; gap: 18px; padding: 0 12px; font-size: 13px; }
.hb.has-sel .hb-bulk { display: flex; } .hb.has-sel .hb-bhead { display: none; }
.hb-bulk .hb-link { display: inline-flex; gap: 5px; align-items: center; font-weight: 600; }
.hb-cols { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; }
.hb-cols::-webkit-scrollbar, .hb-list::-webkit-scrollbar { width: 6px; height: 7px; }
.hb-cols::-webkit-scrollbar-thumb, .hb-list::-webkit-scrollbar-thumb { background: var(--hb-scroll); border-radius: 4px; }
.hb-col { position: relative; width: 260px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--hb-line); }
.hb-col.folded { width: 59px; background: var(--hb-bar); }
.hb-ch { height: 58px; flex: none; display: flex; align-items: center; padding: 0 8px 0 8px; background: var(--hb-bar); border-top: 1px solid var(--hb-line); border-bottom: 1px solid var(--hb-line); }
.hb-cn { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-cc { margin: 0 0 0 10px; font-size: 13px; font-weight: 600; }
.hb-rot { margin-left: 14px; font-size: 12px; color: var(--hb-sub); }
.hb-fold { margin-left: 14px; width: 26px; height: 26px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--hb-line-strong); border-radius: 3px; background: var(--hb-btn); cursor: pointer; color: var(--hb-text); }
.hb-fold .private-icon { font-size: 10px; }
.hb-col.folded .hb-ch { padding: 0; justify-content: center; border-bottom: 0; }
.hb-col.folded .hb-fold { margin: 0; }
.hb-vert { position: absolute; left: 0; right: 0; top: 58px; bottom: 0; display: flex; flex-direction: column; align-items: center; padding-top: 0; }
.hb-vert span { writing-mode: vertical-rl; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; max-height: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-vert b { margin-top: 12px; writing-mode: vertical-rl; font-size: 13px; font-weight: 600; }
.hb-list { flex: 1; min-height: 0; overflow-y: auto; padding: 5px 5px 8px 5px; display: flex; flex-direction: column; gap: 8px; transition: background-color .15s; }
/* measured: cards fade out just above the totals row */
.hb-list { -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), rgba(0,0,0,.25)); mask-image: linear-gradient(#000 calc(100% - 26px), rgba(0,0,0,.25)); }
.hb-col.drop .hb-list { background: rgba(0, 164, 189, .08); box-shadow: inset 0 0 0 2px rgba(0, 164, 189, .45); }
.hb-cfoot { height: 60px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-top: 1px solid var(--hb-line); background: var(--hb-page); font-size: 14px; line-height: 20px; }
.hb-cfoot small { font-size: 13px; line-height: 20px; display: flex; align-items: center; gap: 4px; }
.hb.sum-head .hb-cfoot { order: -1; height: 46px; border-top: 0; border-bottom: 1px solid var(--hb-line); }
.hb.sum-head .hb-ch { order: -2; }
.hb-col.folded .hb-cfoot { visibility: hidden; }
.hb-delay { font-family: spacesword; font-size: 12px; color: var(--hb-sub); animation: hb-spin 1s linear infinite; display: inline-block; }
@keyframes hb-spin { to { transform: rotate(360deg); } }

/* ---------- cards ---------- */
.hb-card { position: relative; flex: none; padding: 9px 12px 8px; border-radius: 3px; background: var(--hb-card); cursor: grab; font-size: 14px; line-height: 20px;
  transition: background-color .15s ease-out, box-shadow .15s ease-out, opacity .15s; }
.hb-card:hover, .hb-card.is-hot { background: var(--hb-card-hover); box-shadow: 0 0 0 1px var(--hb-line); }
.hb-card:focus-visible { outline: 0; box-shadow: 0 0 4px 1px rgba(0, 208, 228, .3), 0 0 0 1px #00d0e4; }
.hb-card.sel { background: var(--hb-card-hover); box-shadow: 0 0 0 2px var(--hb-teal); }
.hb-card.dragging { opacity: .4; }
.hb-card.inactive { opacity: .62; }
.hb-card .nm { display: block; padding-right: 22px; font-weight: 600; color: var(--hb-link); }
.hb-card .pr b { font-weight: 600; }
.hb-card .ck { position: absolute; right: 10px; top: 10px; width: 18px; height: 18px; border: 1px solid var(--hb-line-strong); border-radius: 3px; background: var(--hb-page); display: none; place-items: center; cursor: pointer; padding: 0; }
.hb-card:hover .ck, .hb-card .ck[aria-checked="true"], .hb.has-sel .hb-card .ck, .hb-card:focus-within .ck { display: grid; }
.hb-card .ck[aria-checked="true"] { background: var(--hb-teal); border-color: var(--hb-teal); }
.hb-card .ck[aria-checked="true"]::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.hb-card .ft { display: flex; align-items: center; gap: 4px; margin-top: 10px; padding-top: 7px; border-top: 1px solid var(--hb-line-strong); }
.hb-card .av { width: 24px; height: 24px; border-radius: 50%; background: #b6c1cf; color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; }
.hb-card .av.o { background: transparent; box-shadow: inset 0 0 0 1px var(--hb-line-strong); }
.hb-card .act { margin-top: 6px; font-size: 12px; line-height: 18px; color: var(--hb-sub); }
.hb-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hb-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--hb-teal); border-radius: 3px; background: var(--hb-chip); color: var(--hb-text); font-size: 12px; font-weight: 600; }
.hb-tag.stale, .hb-tag.overdue { border-color: #f2545b; background: #fdedee; color: #33475b; }
.hb-tag.stale { border-color: #cbd6e2; background: #f5f8fa; }
.hs-dark .hb-tag.stale { background: #33475b; color: #eaf0f6; border-color: #516f90; } .hs-dark .hb-tag.overdue { background: rgba(242, 84, 91, .2); color: #eaf0f6; }
.hb-card .prio { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.hb-card .prio i { width: 8px; height: 8px; border-radius: 50%; }
.hb-card .next { margin-top: 6px; font-size: 12px; line-height: 18px; color: var(--hb-text); }
.hb-card .next b { font-weight: 600; }
.hb-card .qa { display: none; gap: 6px; margin-top: 8px; }
.hb.adjusted .hb-card .qa { display: flex; }
.hb-card .qa button { height: 24px; padding: 0 8px; border: 1px solid var(--hb-line-strong); border-radius: 3px; background: var(--hb-page); font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.hb-card .qa button:hover { border-color: var(--hb-teal); color: var(--hb-link); }
.hb.compact .hb-card { padding: 7px 10px; }
.hb.compact .hb-card .pr:not(.keep), .hb.compact .hb-card .ft, .hb.compact .hb-card .tags, .hb.compact .hb-card .act { display: none; }
.hb.no-tags .hb-card .tags { display: none; } .hb.no-act .hb-card .act { display: none; }
.hb-ph { flex: none; border: 2px dashed var(--hb-teal); border-radius: 3px; background: rgba(0, 164, 189, .06); }
.hb-empty { padding: 26px 10px; text-align: center; color: var(--hb-sub); font-size: 13px; }
.hb-spin { width: 20px; height: 20px; margin: 24px auto; border-radius: 50%; border: 2px solid var(--hb-teal); border-right-color: transparent; animation: hb-spin .8s linear infinite; }

/* ---------- popovers, panel, list view ---------- */
.hb-pop { position: absolute; z-index: 40; min-width: 200px; padding: 8px 0; background: var(--hb-page); border-radius: 3px; box-shadow: 0 1px 24px rgba(45, 62, 80, .2); border: 1px solid var(--hb-line-strong);
  opacity: 0; transform: scale(.75); transform-origin: top left; visibility: hidden; transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s; }
.hb-pop.right { transform-origin: top right; }
.hb-pop.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.hs-dark .hb-pop { background: #33475b; border-color: #516f90; }
.hb-pop button.it { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 20px; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 14px; white-space: nowrap; }
.hb-pop button.it:hover, .hb-pop button.it:focus-visible { background: var(--hb-chip); outline: 0; }
.hb-pop button.it[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--hb-teal); font-weight: 600; }
.hb-pop .muted { padding: 6px 20px; font-size: 12px; color: var(--hb-sub); }
.hb-pop hr { border: 0; border-top: 1px solid var(--hb-line); margin: 6px 0; }
.hb-tip { position: absolute; z-index: 50; padding: 6px 12px; border-radius: 3px; background: #33475b; color: #fff; font-size: 12px; line-height: 18px; pointer-events: none; white-space: nowrap; }
.hs-dark .hb-tip { background: #eaf0f6; color: #33475b; }
.hb-panel { position: absolute; z-index: 60; top: 0; right: 0; bottom: 0; width: 430px; background: var(--hb-page); box-shadow: -4px 0 18px rgba(45, 62, 80, .2); transform: translateX(100%); visibility: hidden;
  transition: transform .4s ease-in, visibility 0s linear .4s; display: flex; flex-direction: column; }
.hb-panel.is-open { transform: none; visibility: visible; transition: transform .4s ease-out, visibility 0s; }
.hb-panel .ph { height: 64px; flex: none; display: flex; align-items: center; padding: 0 56px 0 24px; background: #00a4bd; color: #fff; font-size: 18px; font-weight: 600; position: relative; }
.hs-dark .hb-panel .ph { background: #0091ae; }
.hb-panel .ph button { position: absolute; right: 16px; top: 18px; width: 28px; height: 28px; border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 18px; }
.hb-panel .pb { flex: 1; overflow: auto; padding: 18px 24px; display: grid; gap: 14px; align-content: start; }
.hb-panel .pb label { display: grid; gap: 4px; font-size: 12px; color: var(--hb-sub); }
.hb-panel .pb .v { font-size: 14px; color: var(--hb-text); }
.hb-panel select, .hb-panel input, .hb-modal select, .hb-modal input { height: 36px; padding: 0 10px; border: 1px solid var(--hb-line-strong); border-radius: 3px; background: var(--hb-bar); color: var(--hb-text); font: inherit; }
.hb-panel .pf { flex: none; display: flex; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--hb-line); background: var(--hb-bar); }
.hb-veil { position: absolute; inset: 0; z-index: 55; background: rgba(45, 62, 80, .35); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; }
.hb-veil.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.hb-table { position: absolute; left: 25px; right: 16px; top: 158px; bottom: 22px; overflow: auto; border: 1px solid var(--hb-line); display: none; }
.hb.list .hb-table { display: block; } .hb.list .hb-board, .hb.list .hb-ins { display: none; }
.hb-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hb-table th { position: sticky; top: 0; background: var(--hb-bar); text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--hb-line); }
.hb-table td { padding: 9px 12px; border-bottom: 1px solid var(--hb-line); white-space: nowrap; }
.hb-table tr:hover td { background: var(--hb-bar); }
.hb-mark { position: absolute; pointer-events: none; }
.rk-nomarks .hb-mark { display: none; }

@media (prefers-reduced-motion: reduce) { .hb *, .hb-pop, .hb-panel, .hb-veil { transition-duration: 1ms !important; animation-duration: 1ms !important; } }

/* ---------- tickets board (measured from "move-stage-or-status.gif", 2023) ---------- */
.hbt .hb-card .act.tk { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--hb-text); }
.hbt .hb-card .ft { margin-top: 8px; }
.hbt .hb-ch { border-top: 0; }
.hbt { border-top: 1px solid var(--hb-line); }
.hbt .hb-list { gap: 5px; padding-top: 5px; }
.scr:has(.hbt) .hb-head-btns .private-button { padding: 0 12px; }
.scr:has(.hbt) .hb-tools .hb-save { font-weight: 600; color: var(--hb-text); }
.scr:has(.hbt) .hb-tools .hb-save:not(.hb-bact) { color: var(--hb-sub); }