/* ==========================================================================
   Chambers — Bootstrap 5.3 design system
   --------------------------------------------------------------------------
   Drop-in stylesheet loaded AFTER bootstrap.min.css. It retones Bootstrap by
   overriding its CSS custom properties — no SCSS build step required.
   When we want deeper control later, these tokens map 1:1 to Bootstrap's
   SCSS variables ($primary, $body-bg, $border-radius, ...).
   ========================================================================== */

/* ---- 1. Design tokens --------------------------------------------------- */
:root {
  /* Figma brand palette */
  --cb-brown:        #3d2208;   /* espresso / primary */
  --cb-brown-700:    #2e1905;
  --cb-brown-100:    #eee8e2;
  --cb-sage:         #d5d1aa;
  --cb-sage-100:     #f2f1e4;
  --cb-sky:          #d4e4f4;
  --cb-sky-100:      #edf4fb;
  --cb-parchment:    #f1ebe3;
  --cb-green:        #34433b;
  --cb-green-700:    #2a362f;

  /* Surfaces */
  --cb-bg:           #f8f6f2;   /* app background (warm cream) */
  --cb-surface:      #ffffff;   /* cards, inputs, sidebar */
  --cb-surface-soft: #fbfaf8;
  --cb-border:       #dedbd4;   /* hairlines */
  --cb-border-light: #ece9e3;

  /* Text */
  --cb-text:         #211f1d;
  --cb-text-muted:   #6d6964;
  --cb-text-faint:   #99948d;

  /* Type families */
  --cb-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cb-font-display: "Instrument Serif", Georgia, serif;
  /* Accent / status fills (soft pastels) */
  --cb-pink:         #f8e8e8;   --cb-pink-ink:   #a9252d;
  --cb-blue:         var(--cb-sky-100); --cb-blue-ink: #275b89;
  --cb-mint:         #e8f3e9;   --cb-mint-ink:   #317446;
  --cb-folder-tab:     var(--cb-sky);
  --cb-folder-tab-sub: var(--cb-sage);

  /* Tag palette (chips with colored dots) */
  --cb-tag-orange:   #b45309;
  --cb-tag-green:    #15803d;
  --cb-tag-blue:     #1d4ed8;
  --cb-tag-purple:   #7c3aed;
  --cb-tag-red:      #be123c;
  --cb-tag-teal:     #0f766e;

  /* Radii & shadow */
  --cb-radius-xs:    4px;
  --cb-radius-sm:    6px;
  --cb-radius:       8px;
  --cb-radius-lg:    12px;
  --cb-shadow-sm:    0 1px 2px rgba(61, 34, 8, .05);
  --cb-shadow:       0 8px 24px rgba(61, 34, 8, .09);

  /* Shared interaction states */
  --cb-focus-ring:   0 0 0 3px rgba(61, 34, 8, .14);
  --cb-transition:   150ms ease;

  /* ---- Map tokens onto Bootstrap's global CSS variables ---- */
  --bs-body-bg:           var(--cb-bg);
  --bs-body-color:        var(--cb-text);
  --bs-secondary-color:   var(--cb-text-muted);
  --bs-tertiary-color:    var(--cb-text-faint);
  --bs-border-color:      var(--cb-border);
  --bs-border-radius:     var(--cb-radius);
  --bs-border-radius-sm:  var(--cb-radius-sm);
  --bs-border-radius-lg:  var(--cb-radius-lg);
  --bs-border-radius-xl:  var(--cb-radius-lg);
  --bs-emphasis-color:    var(--cb-text);

  --bs-primary:           var(--cb-brown);
  --bs-primary-rgb:       61, 34, 8;
  --bs-link-color:        var(--cb-brown);
  --bs-link-color-rgb:    61, 34, 8;
  --bs-link-hover-color:  var(--cb-brown-700);

  --bs-font-sans-serif: var(--cb-font-sans);
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: .9375rem;
  --bs-body-line-height: 1.5;
}

/* ---- 2. Base & typography ---------------------------------------------- */
body {
  background-color: var(--cb-bg);
  color: var(--cb-text);
  -webkit-font-smoothing: antialiased;
}

.cb-legal-document {
  max-width: 760px;
}
.cb-legal-document h2 {
  font-size: 1.15rem;
  margin-top: 2rem;
}
.cb-legal-document p {
  line-height: 1.7;
}

h1, h2, .h1, .h2,
.cb-display-title {
  font-family: var(--cb-font-display);
  font-weight: 400;
  letter-spacing: -.015em;
}

h3, h4, h5, h6,
.h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cb-text);
}

body h1, body h2,
body h1[class], body h2[class] { font-weight: 400; }

/* h2 used at h6 size (section labels like "Sub-folders" / "Files") reads as a
   small label, not a display heading, so it skips the serif display face.
   Specificity/order must beat the "body h2[class]" reset above. */
body h2.h6, body .h2.h6 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: normal;
}
h1, .h1 { font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.05; }
h2, .h2 { line-height: 1.12; }
p { text-wrap: pretty; }

.text-muted { color: var(--cb-text-muted) !important; }

/* Uppercase section label (sidebar groups: SEARCH / COMPILE / TRACK) */
.cb-eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cb-text-faint);
}

/* ---- 3. Buttons -------------------------------------------------------- */
.btn {
  --bs-btn-border-radius: 8px;
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.25;
  --bs-btn-padding-y: .45rem;
  --bs-btn-padding-x: .875rem;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--cb-transition), background-color var(--cb-transition),
              border-color var(--cb-transition), box-shadow var(--cb-transition),
              transform var(--cb-transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { box-shadow: var(--cb-focus-ring); }
.btn-sm {
  --bs-btn-font-size: .8125rem;
  --bs-btn-padding-y: .34rem;
  --bs-btn-padding-x: .7rem;
  min-height: 30px;
}
.btn-xs {
  --bs-btn-font-size: .7rem;
  --bs-btn-padding-y: .18rem;
  --bs-btn-padding-x: .5rem;
  min-height: 24px;
  --bs-btn-border-radius: var(--cb-radius-sm);
}
.btn-lg {
  --bs-btn-font-size: .9375rem;
  --bs-btn-padding-y: .65rem;
  --bs-btn-padding-x: 1.1rem;
  min-height: 44px;
}

/* Primary = espresso brown */
.btn-primary {
  --bs-btn-bg: var(--cb-brown);
  --bs-btn-border-color: var(--cb-brown);
  --bs-btn-hover-bg: var(--cb-brown-700);
  --bs-btn-hover-border-color: var(--cb-brown-700);
  --bs-btn-active-bg: var(--cb-brown-700);
  --bs-btn-active-border-color: var(--cb-brown-700);
  --bs-btn-disabled-bg: var(--cb-brown);
  --bs-btn-disabled-border-color: var(--cb-brown);
  --bs-btn-disabled-opacity: .38;
  --bs-btn-font-weight: 500;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 16px;
  padding-right: 16px;
}

/* "Special" = soft gradient action button (AI-flavoured features like
   Generate summary). Reusable anywhere a quieter, non-primary highlight
   action is wanted instead of the solid espresso .btn-primary. */
.btn-cb-special {
  --bs-btn-color: #404040;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #404040;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #404040;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #404040;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-opacity: .55;
  --bs-btn-font-weight: 500;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 16px;
  padding-right: 16px;
  background: linear-gradient(90deg, #d9eafa 0%, #f1eccf 72%, #f3eee5 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: filter var(--cb-transition);
}
.btn-cb-special:hover,
.btn-cb-special:focus-visible {
  background: linear-gradient(90deg, #d9eafa 0%, #f1eccf 72%, #f3eee5 100%);
  filter: brightness(.97);
}
.btn-cb-special:disabled { background: linear-gradient(90deg, #d9eafa 0%, #f1eccf 72%, #f3eee5 100%); }

/* Secondary = quiet outline on white */
.btn-outline-secondary,
.btn-light {
  --bs-btn-color: #404040;
  --bs-btn-bg: var(--cb-surface);
  --bs-btn-border-color: var(--cb-border);
  --bs-btn-hover-color: #404040;
  --bs-btn-hover-bg: var(--cb-bg);
  --bs-btn-hover-border-color: #c9c5bd;
  --bs-btn-active-bg: var(--cb-bg);
  --bs-btn-active-border-color: var(--cb-border);
  --bs-btn-font-weight: 500;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.btn-secondary {
  --bs-btn-color: var(--cb-text);
  --bs-btn-bg: var(--cb-sage);
  --bs-btn-border-color: var(--cb-sage);
  --bs-btn-hover-color: var(--cb-text);
  --bs-btn-hover-bg: #c9c493;
  --bs-btn-hover-border-color: #c9c493;
  --bs-btn-active-color: var(--cb-text);
  --bs-btn-active-bg: #beb983;
  --bs-btn-active-border-color: #beb983;
}

.btn-link {
  --bs-btn-color: var(--cb-brown);
  --bs-btn-hover-color: var(--cb-brown-700);
  text-underline-offset: .18em;
}

.btn-danger {
  --bs-btn-bg: #c9343d;
  --bs-btn-border-color: #c9343d;
  --bs-btn-hover-bg: #ac2831;
  --bs-btn-hover-border-color: #ac2831;
  --bs-btn-active-bg: #98232b;
  --bs-btn-active-border-color: #98232b;
}
.btn-outline-danger {
  --bs-btn-color: #b62c35;
  --bs-btn-border-color: #dc9ca1;
  --bs-btn-hover-bg: #c9343d;
  --bs-btn-hover-border-color: #c9343d;
}

.btn-outline-primary {
  --bs-btn-color: var(--cb-brown);
  --bs-btn-border-color: var(--cb-brown);
  --bs-btn-hover-bg: var(--cb-brown);
  --bs-btn-hover-border-color: var(--cb-brown);
  --bs-btn-active-bg: var(--cb-brown-700);
}

/* ---- 4. Forms ---------------------------------------------------------- */
.form-control,
.form-select {
  border-radius: 8px;
  border-color: #d4d4d4;
  min-height: 38px;
  padding: .48rem 20px .48rem 14px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #404040;
}
/* Every dropdown/select-style control in the app is normalized to a 34px
   row height, distinct from plain text .form-control fields. */
.form-select {
  height: 34px;
  min-height: 34px;
  padding-top: .3rem;
  padding-bottom: .3rem;
}
.form-control::placeholder { color: var(--cb-text-faint); }
.form-control:focus,
.form-select:focus {
  border-color: var(--cb-brown);
  box-shadow: var(--cb-focus-ring);
}
.form-label { font-size: .84rem; font-weight: 500; color: #404040; margin-bottom: .3rem; }
.form-check-input:checked { background-color: var(--cb-brown); border-color: var(--cb-brown); }
.form-check-input:focus { border-color: var(--cb-brown); box-shadow: var(--cb-focus-ring); }
.cb-required::after {
  content: " *";
  color: var(--cb-tag-red);
  font-weight: 700;
}
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] {
  border-color: var(--cb-tag-red);
  box-shadow: 0 0 0 3px rgba(190, 18, 60, .12);
}
/* Document activity as a timeline: a dot per entry linked by a connecting
   line (an absolutely-positioned ::before, not flex-stretch, so the line's
   height is exact regardless of each entry's text length). Namespaced
   cb-doc-activity-* to avoid colliding with the unrelated pre-existing
   .cb-activity-item/.cb-activity-content dashboard timeline classes. */
.cb-doc-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cb-doc-activity-item {
  position: relative;
  display: flex;
  gap: 10px;
  padding-bottom: 14px;
}
.cb-doc-activity-item:last-child { padding-bottom: 0; }
.cb-doc-activity-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 0;
  left: 3px;
  width: 1px;
  background: var(--cb-border-light);
}
.cb-doc-activity-dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--cb-border);
}
.cb-doc-activity-content { flex: 1; min-width: 0; }

/* Document detail's right rail (AI summary / Notes / Details / Activity)
   stays in view while the preview column scrolls, scrolling internally once
   its own content outgrows the viewport. */
.cb-document-sidebar {
  position: sticky;
  top: 16px;
  align-self: flex-start;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

/* ---- Custom calendar dropdown (replaces native <input type="date"> picker,
   which cannot be restyled) --------------------------------------------- */
.cb-datepicker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 260px;
  background: #fff;
  border: 1px solid var(--cb-border-light);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow);
  padding: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.cb-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cb-datepicker-month-label {
  font-weight: 600;
  font-size: .875rem;
  color: var(--cb-text);
}
.cb-datepicker-nav {
  display: flex;
  gap: 4px;
}
.cb-datepicker-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--cb-radius-xs);
  color: #404040;
  cursor: pointer;
}
.cb-datepicker-nav button:hover { background: var(--cb-surface-soft); color: var(--cb-text); }
.cb-datepicker-weekdays,
.cb-datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cb-datepicker-weekdays {
  margin-bottom: 4px;
}
.cb-datepicker-weekdays span {
  text-align: center;
  font-size: .68rem;
  font-weight: 600;
  color: var(--cb-text-faint);
}
.cb-datepicker-grid button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-size: .8rem;
  color: var(--cb-text);
  cursor: pointer;
}
.cb-datepicker-grid button:hover { background: var(--cb-surface-soft); }
.cb-datepicker-grid button.cb-datepicker-muted { color: var(--cb-text-faint); }
.cb-datepicker-grid button.cb-datepicker-today { box-shadow: inset 0 0 0 1px var(--cb-border); }
.cb-datepicker-grid button.cb-datepicker-selected {
  background: var(--cb-brown);
  color: #fff;
  font-weight: 600;
}
.cb-datepicker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--cb-border-light);
}
.cb-datepicker-link {
  border: 0;
  background: transparent;
  padding: 2px 4px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--cb-brown);
  cursor: pointer;
}
.cb-datepicker-link:hover { text-decoration: underline; }

/* Password field with inline show/hide toggle */
.cb-password { position: relative; }
.cb-password input { padding-right: 3.5rem; }
.cb-password [data-toggle-password] {
  position: absolute;
  top: 50%;
  right: .6rem;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--cb-text-muted);
  font-size: 11.8px;
  font-weight: 500;
  padding: .2rem .4rem;
  cursor: pointer;
}
.cb-field-error { color: var(--cb-tag-red); font-size: .82rem; margin-top: .3rem; }
.cb-help { color: var(--cb-text-faint); font-size: .8rem; margin-top: .3rem; }
.cb-google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  width: 440px;
  max-width: 100%;
  height: 40px;
  padding: 0 20px;
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #404040;
}
.cb-google-button:hover,
.cb-google-button:focus-visible {
  background-color: #ffffff;
  border-color: #d4d4d4;
  color: #404040;
}
.cb-auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--cb-text-faint);
  font-size: .75rem;
  margin: 1.25rem 0;
}
.cb-auth-divider::before,
.cb-auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--cb-border);
}

.cb-auth-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cb-auth-body > .cb-auth-shell {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
}
.cb-auth-body > .cb-auth-shell > * { width: 100%; }
.cb-auth-footer { width: 100%; padding: 1.5rem 0; }

.cb-auth-shell h1.h3 { font-size: 31px; }
.cb-auth-aside { font-size: 14px; }
.cb-auth-subheading { font-size: 14px; }
.cb-auth-shell .btn.w-100 {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cb-auth-shell { max-width: 460px; }
.cb-auth-shell-wide { max-width: 540px; }

.cb-auth-shell a,
.cb-auth-footer a {
  text-decoration: none;
}
.cb-auth-shell a:hover:not(.btn),
.cb-auth-footer a:hover:not(.btn) {
  text-decoration: underline;
  color: var(--cb-brown-700);
}

.cb-role-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
.cb-role-option {
  position: relative;
  min-width: 0;
  cursor: pointer;
}
.cb-role-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cb-role-option-content {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .45rem .55rem;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  background: var(--cb-surface);
  color: var(--cb-text);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: border-color var(--cb-transition), background-color var(--cb-transition), box-shadow var(--cb-transition);
}
.cb-role-option-content svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-role-option:hover .cb-role-option-content { background: var(--cb-surface-soft); }
.cb-role-option input:checked + .cb-role-option-content {
  border-color: var(--cb-brown);
  background: var(--cb-brown-100);
  box-shadow: inset 0 0 0 1px var(--cb-brown);
}
.cb-role-option input:focus-visible + .cb-role-option-content { box-shadow: var(--cb-focus-ring); }

@media (max-width: 575.98px) {
  .cb-role-options { grid-template-columns: 1fr; }
  .cb-role-option-content { justify-content: flex-start; padding-inline: .8rem; }
}

/* Searchable multi-select with removable pills (task assignees). */
.cb-tag-select.cb-tag-select--enhanced { display: none; }
.cb-tag-picker { position: relative; }
.cb-tag-picker-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  min-height: 34px;
  padding: .3rem .6rem;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  background: var(--cb-surface);
  cursor: text;
}
.cb-tag-picker-control:focus-within {
  border-color: var(--cb-green);
  box-shadow: 0 0 0 3px rgba(52, 67, 59, .12);
}
.cb-tag-picker-pills {
  display: contents;
}
.cb-tag-picker-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: 100%;
  padding: 3.8px .4rem 3.8px .7rem;
  border: 1px solid #cddbd3;
  border-radius: 999px;
  background: #edf4f0;
  color: var(--cb-green-700);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.2;
}
.cb-tag-picker-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-tag-picker-remove {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cb-green-700);
  font-size: 1rem;
  line-height: 1;
}
.cb-tag-picker-remove:hover,
.cb-tag-picker-remove:focus-visible { background: rgba(52, 67, 59, .12); }
.cb-tag-picker-input {
  flex: 1 1 170px;
  min-width: 110px;
  min-height: 30px;
  padding: .2rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cb-text);
}
.cb-tag-picker-input::placeholder { color: var(--cb-text-faint); }
/* Match the plain .form-control look used by every other field in this modal
   (the shared component defaults to a taller, differently-padded chrome). */
#taskCreateModal .cb-tag-picker-control,
#editTaskModal .cb-tag-picker-control {
  height: 34px;
  min-height: 34px;
  padding: .3rem 20px .3rem 14px;
  border-radius: 8px;
  border-color: #d4d4d4;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
  flex-wrap: nowrap;
  overflow-x: auto;
}
#taskCreateModal .cb-tag-picker-pill,
#editTaskModal .cb-tag-picker-pill { flex-shrink: 0; }
#taskCreateModal .cb-tag-picker-input,
#editTaskModal .cb-tag-picker-input {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #404040;
  min-height: 24px;
}
.cb-tag-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1060;
  max-height: 240px;
  overflow-y: auto;
  padding: .35rem;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  background: var(--cb-surface);
  box-shadow: var(--cb-shadow);
}
.cb-tag-picker-menu[hidden] { display: none; }
.cb-tag-picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .6rem .7rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cb-text);
  text-align: left;
}
.cb-tag-picker-option:hover,
.cb-tag-picker-option:focus-visible { background: var(--cb-bg); outline: 0; }
.cb-tag-picker-option[aria-selected="true"] {
  background: #edf4f0;
  color: var(--cb-green-700);
  font-weight: 500;
}
.cb-tag-picker-empty {
  padding: .65rem .7rem;
  color: var(--cb-text-muted);
  font-size: .86rem;
}

/* Searchable single-select used by task matter and assignee filters. */
.cb-search-select.cb-search-select--enhanced { display: none; }
.cb-search-select-picker { position: relative; }
.cb-search-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  height: 34px;
  min-height: 34px;
  padding: .3rem 16px .3rem 14px;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
  color: #404040;
  text-align: left;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.cb-search-select-trigger:hover { border-color: #d4d1c9; }
.cb-search-select-trigger:focus-visible {
  border-color: var(--cb-green);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(52, 67, 59, .12);
}
.cb-search-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-search-select-chevron { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--cb-text-muted); margin-right: -2px; }
.cb-search-select-icon { display: inline-flex; flex: 0 0 auto; width: 16px; height: 16px; color: var(--cb-text-muted); }
.cb-search-select-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-search-select-menu {
  /* Fixed, not absolute: JS sets top/left/width from the trigger's viewport
     rect so no scrolling ancestor can clip it. */
  position: fixed;
  z-index: 1060;
  min-width: 0;
  padding: .4rem;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  background: var(--cb-surface);
  box-shadow: var(--cb-shadow);
}
.cb-task-filters .row > div { min-width: 0; }
.cb-task-filters .row {
  --bs-gutter-x: .55rem;
  --bs-gutter-y: .45rem;
}
.cb-task-filters .form-label {
  margin-bottom: .2rem !important;
  color: var(--cb-text-muted);
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.15;
}
.cb-task-filters .form-control,
.cb-task-filters .form-select,
.cb-task-filters .btn {
  min-height: 34px;
  padding-top: .3rem;
  padding-bottom: .3rem;
}
.cb-task-filters .cb-tag-picker-control {
  min-height: 34px;
  gap: .3rem;
  padding: .25rem .45rem;
}
.cb-task-filters .cb-tag-picker-input {
  min-height: 26px;
  padding: .1rem;
  font-size: .86rem;
}
.cb-task-filters .cb-tag-picker-pill {
  padding: .2rem .3rem .2rem .55rem;
  font-size: .78rem;
}
.cb-task-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-left: -24px;
  margin-right: -24px;
  padding: .6rem 24px;
  border-bottom: 1px solid var(--cb-border-light);
  background: var(--cb-surface);
}
.cb-task-search {
  position: relative;
  width: min(17rem, 100%);
}
.cb-task-search svg {
  position: absolute;
  top: 50%;
  left: .7rem;
  z-index: 1;
  width: 1rem;
  transform: translateY(-50%);
  fill: none;
  stroke: #404040;
  stroke-width: 1.8;
}
.cb-task-search .form-control { min-height: 32px; padding-top: .33rem; padding-bottom: .33rem; padding-left: 2.15rem; box-shadow: none; }
.cb-task-primary-filters {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}
.cb-toolbar-filter { position: relative; }
.cb-toolbar-filter > summary { list-style: none; }
.cb-toolbar-filter > summary::-webkit-details-marker { display: none; }
.cb-toolbar-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 32px;
  padding: .3rem .65rem;
  font-size: .8rem;
  white-space: nowrap;
}
.cb-toolbar-filter-trigger > svg {
  width: .8rem;
  height: .8rem;
  fill: none;
  stroke: #404040;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s ease;
}
.cb-toolbar-filter[open] .cb-toolbar-filter-trigger > svg { transform: rotate(180deg); }
.cb-toolbar-filter-popover {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  z-index: 1081;
  width: min(26rem, calc(100vw - 1.5rem));
  overflow: hidden;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  background: var(--cb-surface);
  box-shadow: var(--cb-shadow);
}
.cb-toolbar-filter--center .cb-toolbar-filter-popover {
  right: 0;
  left: auto;
}
.cb-toolbar-filter--end .cb-toolbar-filter-popover { right: 0; left: auto; }
.cb-toolbar-filter-title {
  display: block;
  padding: .8rem .9rem .55rem;
  color: var(--cb-text-muted);
  font-size: .78rem;
  font-weight: 500;
}
.cb-toolbar-filter-field {
  padding: 0 .9rem .9rem;
}
.cb-toolbar-filter-field .cb-tag-picker-control {
  height: 34px;
  min-height: 34px;
  padding: .3rem 20px .3rem 14px;
  border-radius: 8px;
  border-color: #d4d4d4;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
  flex-wrap: nowrap;
  overflow-x: auto;
}
.cb-toolbar-filter-field .cb-tag-picker-pill { flex-shrink: 0; }
.cb-toolbar-filter-field .cb-tag-picker-input {
  min-height: 24px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #404040;
}
.cb-toolbar-filter-field .cb-tag-picker-menu {
  position: static;
  margin-top: 6px;
}
.cb-task-filter-actions {
  display: flex;
  gap: .5rem;
  flex: 0 0 auto;
  margin-left: .15rem;
}
.cb-task-filter-actions .btn {
  min-height: 32px;
  white-space: nowrap;
}
.cb-filter-live-list {
  display: flex;
  flex: 1 1 calc(100% - 12rem);
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding-top: .2rem;
}
.cb-filter-live-list[hidden] { display: none; }
.cb-filter-live-label {
  flex: 0 0 auto;
  color: var(--cb-text-muted);
  font-size: .76rem;
  font-weight: 500;
}
.cb-filter-live-items {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: .4rem;
  min-width: 0;
}
.cb-filter-live-chip {
  appearance: none;
  cursor: pointer;
}
.cb-filter-live-chip:hover,
.cb-filter-live-chip:focus-visible {
  border-color: #c8c4bb;
  background: var(--cb-bg);
  outline: 0;
}
.cb-filter-clear-all {
  flex: 0 0 auto;
  color: var(--cb-text-muted);
  font-size: .76rem;
  white-space: nowrap;
}
.cb-filter-menu { position: relative; }
.cb-filter-menu > summary { list-style: none; }
.cb-filter-menu > summary::-webkit-details-marker { display: none; }
.cb-filter-trigger { display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; padding: .3rem .65rem; font-size: .8rem; }
.cb-filter-trigger svg { width: 1rem; fill: none; stroke: #404040; stroke-width: 1.7; }
.cb-filter-trigger .cb-filter-chevron {
  width: .8rem;
  height: .8rem;
  margin-left: .05rem;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-filter-count {
  display: inline-grid;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  border-radius: 50%;
  background: #111827;
  color: #fff;
  font-size: .65rem;
}
.cb-filter-popover {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 1080;
  display: grid;
  grid-template-columns: minmax(12rem, .9fr) minmax(19rem, 1.35fr);
  width: min(46rem, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  background: var(--cb-surface);
  box-shadow: var(--cb-shadow);
}
.cb-filter-nav { padding: .85rem; border-right: 1px solid var(--cb-border); }
.cb-filter-tab {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .65rem;
  margin-bottom: .2rem;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: var(--cb-text);
  text-align: left;
}
.cb-filter-tab:hover, .cb-filter-tab.active { background: var(--cb-bg); }
.cb-filter-tab.active { font-weight: 500; }
.cb-filter-content { position: relative; min-height: 22rem; padding: 1rem; }
.cb-filter-panel { display: none; }
.cb-filter-panel.active { display: block; }
/* Match the plain .form-control look used by every other field in this
   popover (the shared component defaults to a taller, differently-padded
   chrome) — same treatment already applied inside the task modals. */
.cb-filter-panel .cb-tag-picker-control {
  height: 34px;
  min-height: 34px;
  padding: .3rem 20px .3rem 14px;
  border-radius: 8px;
  border-color: #d4d4d4;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
  flex-wrap: nowrap;
  overflow-x: auto;
}
.cb-filter-panel .cb-tag-picker-pill { flex-shrink: 0; }
.cb-filter-panel .cb-tag-picker-input {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #404040;
  min-height: 24px;
}
.cb-home-summary {
  display: flex;
  min-height: 116px;
  padding: 1rem;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color .15s ease, transform .15s ease;
}
.cb-home-summary:hover { border-color: var(--cb-accent); transform: translateY(-1px); }
.cb-home-summary-count { font-size: 1.8rem; line-height: 1; }
.cb-home-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem 0;
  border-top: 1px solid var(--cb-border);
}
.cb-home-task-row:first-of-type { border-top: 0; }
.cb-home-task-row strong,
.cb-home-task-row small { display: block; }
.cb-home-section + .cb-home-section {
  padding-top: 1rem;
  border-top: 1px solid var(--cb-border);
}
.cb-repository-stat {
  display: flex;
  min-height: 100px;
  padding: .85rem 1rem;
  flex-direction: column;
  justify-content: space-between;
}
.cb-repository-stat strong { font-size: 1.55rem; line-height: 1; }
a.cb-repository-stat:hover { border-color: var(--cb-accent); }

/* Figma dashboard -------------------------------------------------------- */
.cb-dashboard { width: min(100%, 1280px); margin-inline: auto; }
.cb-activation-card {
  padding: 16px 1.25rem 1.25rem;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  background: linear-gradient(135deg, #fffaf4 0%, #fff 72%);
}
.cb-activation-card:has(+ .cb-research-intro) {
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
.cb-activation-card + .cb-research-intro {
  margin-top: 0;
  margin-bottom: 80px !important;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.cb-activation-head .btn-close {
  width: 12px;
  height: 12px;
  padding: 0;
  background-size: 12px;
}
.cb-activation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cb-activation-head h2 { margin: .15rem 0 .2rem; padding-top: 6px; padding-bottom: 6px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22.4px; letter-spacing: -0.1px; }
.cb-activation-head p { margin: 0; color: var(--cb-text-muted); font-size: .82rem; }
.cb-activation-kicker { color: var(--cb-brown-700); font-size: 9.2px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.cb-activation-progress { height: 4px; margin: 1rem 0; overflow: hidden; border-radius: 999px; background: #eadfd3; }
.cb-activation-progress span { display: block; height: 100%; border-radius: inherit; background: var(--cb-brown); transition: width .4s ease; }
.cb-activation-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(.65rem + 4px); }
.cb-activation-step { display: flex; gap: .65rem; align-items: center; padding: .75rem; border: 1px solid var(--cb-border-light); border-radius: 10px; color: var(--cb-text); text-decoration: none; background: rgba(255,255,255,.7); transition: border-color .15s ease, transform .15s ease; }
.cb-activation-step:hover { transform: translateY(-1px); border-color: #cbb091; color: var(--cb-text); }
.cb-activation-step > span:last-child { min-width: 0; }
.cb-activation-step strong, .cb-activation-step small { display: block; }
.cb-activation-step strong { font-size: .82rem; color: #404040; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; }
.cb-activation-step small { margin-top: .1rem; color: var(--cb-text-muted); font-size: .7rem; }
.cb-activation-check { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border: 1px solid var(--cb-border-light); border-radius: 50%; color: var(--cb-brown); font-size: .75rem; font-weight: 700; }
.cb-activation-step.is-complete .cb-activation-check { border-color: transparent; background: transparent; color: var(--cb-green); animation: cb-check-pop .35s ease-out; }
.cb-activation-step.is-complete strong { text-decoration: line-through; text-decoration-color: #404040; color: #404040; }
.cb-activation-step.is-complete { cursor: default; pointer-events: none; }
.cb-activation-step.is-complete:hover { transform: none; border-color: var(--cb-border-light); }
.cb-research-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--cb-radius);
  background: var(--cb-brown-100);
  animation: cb-research-intro-in .45s ease both;
}
@keyframes cb-research-intro-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.cb-research-intro strong, .cb-research-intro span { display: block; }
.cb-research-intro strong { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 14px; }
.cb-research-intro span { margin-top: .15rem; color: var(--cb-text-muted); font-size: .75rem; }
@keyframes cb-check-pop { 50% { transform: scale(1.15); } }
.cb-orientation-tip { border-color: #c9d9e8; background: #f0f7fc; }
.cb-dashboard-greeting {
  font-family: var(--cb-font-display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.3px;
  margin-top: 14px;
  margin-bottom: 30px !important;
  padding-bottom: 4px;
  padding-left: 4px;
}
.cb-dashboard-date {
  align-items: center;
  gap: .35rem;
  color: var(--cb-text-muted);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .8rem;
  font-weight: 500;
}
.cb-dashboard-date svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-dashboard-stat {
  position: relative;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.15rem 1.35rem;
  border-radius: var(--cb-radius-lg);
  transition: transform var(--cb-transition), box-shadow var(--cb-transition);
}
.cb-dashboard-stat:hover { transform: translateY(-2px); box-shadow: var(--cb-shadow-sm); }
.cb-dashboard-stat strong {
  display: block;
  margin-bottom: .25rem;
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1;
}
.cb-dashboard-stat span { max-width: calc(100% - 2.5rem); font-size: .82rem; font-weight: 500; }
.cb-dashboard-stat svg {
  position: absolute;
  top: 50%;
  right: 1.35rem;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-dashboard-stat--overdue { background: #f8ecee; }
.cb-dashboard-stat--overdue svg { color: #b33c4b; }
.cb-dashboard-stat--due { background: #e8f3fc; }
.cb-dashboard-stat--due svg { color: #27769c; }
.cb-dashboard-stat--done { background: #f5f4eb; }
.cb-dashboard-stat--done svg { color: #7d920f; }
.cb-dashboard-panel {
  overflow: hidden;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  background: var(--cb-surface);
}
@media (min-width: 992px) {
  .col-lg-8:has(#court-dates-heading) { flex: 0 0 auto; width: calc(66.6667% - 30px); }
  .col-lg-4:has(#tasks-today-heading) { flex: 0 0 auto; width: calc(33.3333% + 30px); }
}
section[aria-label="Task summary"] { margin-bottom: 20px !important; --bs-gutter-x: 1.25rem !important; }
.row.g-3:has(#court-dates-heading) { margin-bottom: 20px !important; --bs-gutter-x: 1.25rem !important; }
.row.g-3:has(#matters-heading) { --bs-gutter-x: 1.25rem !important; }
.cb-dashboard-panel > header {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 6px 1rem;
  border-bottom: 1px solid var(--cb-border-light);
}
.cb-dashboard-panel > header h2 { font-family: var(--cb-font-sans); font-size: 14px; font-weight: 500; }
.cb-dashboard-panel > header .btn { flex-shrink: 0; white-space: nowrap; }
.cb-dashboard-list { padding: .35rem .75rem .55rem; }
.cb-dashboard-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .35rem;
  border-radius: var(--cb-radius-sm);
  color: var(--cb-text);
  text-decoration: none;
}
.cb-dashboard-row:hover { background: var(--cb-surface-soft); }
.cb-dashboard-row.is-highlighted { background: #f4f4f3; }
.cb-dashboard-row-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--cb-border-light);
  border-radius: 50%;
  background: var(--cb-surface);
}
.cb-dashboard-row-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-dashboard-row-icon text {
  fill: currentColor;
  stroke: none;
  font-family: var(--cb-font-sans);
  font-size: 8px;
  font-weight: 700;
}
.cb-dashboard-row-copy { min-width: 0; flex: 1 1 auto; }
.cb-dashboard-row-copy strong,
.cb-dashboard-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-dashboard-row-copy strong { font-size: .86rem; font-weight: 600; }
.cb-dashboard-row-copy small { margin-top: .12rem; color: var(--cb-text-muted); font-size: .72rem; }
.cb-dashboard-date-badge {
  flex-shrink: 0;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: #fbf1e6;
  color: #b95a0b;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
}
.cb-dashboard-date-badge.is-today { background: #fdeced; color: #c42d37; }
.cb-dashboard-file-type {
  flex-shrink: 0;
  color: var(--cb-text-faint);
  font-size: .66rem;
  font-weight: 700;
}
.cb-dashboard-empty { padding: 1.5rem .5rem; color: var(--cb-text-muted); font-size: .82rem; }
.cb-month-cal { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .8rem; }
.cb-month-cal th { padding: .45rem 0 .3rem; color: var(--cb-text-muted); font-size: .66rem; font-weight: 600; text-transform: uppercase; text-align: center; }
.cb-month-cal td { height: 46px; padding: .2rem 0; text-align: center; vertical-align: top; border-top: 1px solid var(--cb-border-light); }
.cb-month-cal td.is-outside { color: #c8c6c1; }
.cb-cal-day { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; }
.cb-cal-day.is-today { background: #c42d37; color: #fff; font-weight: 600; }
.cb-cal-dot { display: block; width: 6px; height: 6px; margin: .15rem auto 0; border-radius: 50%; background: #c42d37; }
.cb-quick-reminder { display: grid; gap: .65rem; padding: .75rem 1rem 1rem; }
.cb-quick-reminder .form-label { margin-bottom: .25rem; font-size: .72rem; color: var(--cb-text-muted); }
.cb-quick-reminder-when { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .5rem; }
.cb-qr-attendees { max-height: 128px; overflow-y: auto; display: grid; gap: .1rem; padding: .4rem .5rem; border: 1px solid var(--cb-border); border-radius: .5rem; }
.cb-qr-attendee { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .78rem; cursor: pointer; }
.cb-qr-attendee small { color: var(--cb-text-muted); }
.cb-quick-reminder .form-label small { font-weight: 400; color: var(--cb-text-muted); }
.cb-quick-reminder .btn { justify-self: start; }

@media (max-width: 767.98px) {
  .cb-activation-steps { grid-template-columns: 1fr; }
  .cb-research-intro { align-items: flex-start; flex-direction: column; }
  .cb-dashboard-greeting { font-size: 2rem; }
  .cb-dashboard-stat { min-height: 96px; }
  .cb-dashboard-panel > header { min-height: 54px; }
}

.cb-onboarding-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.cb-onboarding-choice { position: relative; cursor: pointer; }
.cb-onboarding-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cb-onboarding-choice > span { min-height: 120px; display: flex; flex-direction: column; justify-content: center; padding: 1rem; border: 1px solid var(--cb-border); border-radius: var(--cb-radius-lg); background: var(--cb-surface); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.cb-onboarding-choice strong { font-size: 1rem; }
.cb-onboarding-choice small { margin-top: .35rem; color: var(--cb-text-muted); line-height: 1.45; }
.cb-onboarding-choice input:checked + span { border-color: var(--cb-brown); background: var(--cb-brown-100); box-shadow: inset 0 0 0 1px var(--cb-brown); }
.cb-onboarding-choice input:focus-visible + span { box-shadow: var(--cb-focus-ring); }
.cb-onboarding-note { padding: 1rem; border: 1px solid var(--cb-border-light); border-radius: var(--cb-radius); background: var(--cb-surface-soft); }
.cb-onboarding-icon { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto .75rem; border-radius: 50%; background: var(--cb-brown-100); color: var(--cb-brown); font-size: 1.2rem; }
@media (max-width: 575.98px) { .cb-onboarding-choices { grid-template-columns: 1fr; } }

@media (max-width: 575.98px) {
  .cb-dashboard-panel > header { align-items: flex-start; }
  .cb-dashboard-row { gap: .6rem; }
  .cb-dashboard-row-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .cb-dashboard-date-badge { padding-inline: .5rem; }
}
.cb-surface.cb-notification-list {
  background: transparent;
  border: 0;
}
.cb-notification-title {
  font-weight: 500 !important;
  font-size: 14px;
}
.cb-notification-meta {
  font-weight: 400 !important;
  font-size: 12px;
  margin-top: 8px;
}
.cb-notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cb-brown);
  box-shadow: 0 0 0 3px rgba(61, 34, 8, .08);
}
.cb-search-select-menu[hidden] { display: none; }
.cb-search-select-input {
  width: 100%;
  min-height: 36px;
  margin-bottom: .35rem;
  padding: .4rem .6rem;
  border: 1px solid var(--cb-border);
  border-radius: 6px;
  outline: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.cb-search-select-input:focus {
  border-color: var(--cb-green);
  box-shadow: 0 0 0 2px rgba(52, 67, 59, .1);
}
.cb-search-select-options {
  max-height: min(calc(var(--cb-visible-options, 20) * 2.1rem), 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cb-search-select-option {
  display: block;
  width: 100%;
  min-height: 2.1rem;
  padding: .42rem .55rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cb-text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
}
.cb-search-select-option:hover,
.cb-search-select-option:focus-visible { background: var(--cb-bg); outline: 0; }
.cb-search-select-option[aria-selected="true"] {
  background: #edf4f0;
  color: var(--cb-green-700);
  font-weight: 600;
}
.cb-search-select-empty {
  padding: .65rem .55rem;
  color: var(--cb-text-muted);
  font-size: .84rem;
}
.cb-search-select-add {
  color: var(--cb-green-700);
  font-weight: 600;
}
@media (max-width: 575.98px) {
  .cb-search-select-menu { width: 100%; }
}

/* Selectable suggestion chips (e.g. suggested sub-folders) */
.cb-suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: var(--cb-surface);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background .12s, border-color .12s, color .12s;
}
.cb-suggest-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cb-suggest-chip span::before {
  content: "+";
  margin-right: .3rem;
  font-weight: 600;
  color: var(--cb-text-faint);
}
.cb-suggest-chip:hover { border-color: var(--cb-green); }
.cb-suggest-chip:has(input:checked) {
  background: var(--cb-green);
  border-color: var(--cb-green);
  color: #fff;
}
.cb-suggest-chip:has(input:checked) span::before { content: "✓"; color: #fff; }

/* ---- 5. Cards & surfaces ---------------------------------------------- */
.card {
  --bs-card-bg: var(--cb-surface);
  --bs-card-border-color: var(--cb-border);
  --bs-card-border-radius: var(--cb-radius);
  box-shadow: none;
}

.cb-surface {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
}
.cb-surface > h2.h5 { font-size: 28px; }
.cb-profile-card { background: transparent; border: 0; margin-inline: auto; }
.cb-profile-card .fw-semibold { font-weight: 500 !important; }
.cb-profile-email-input:disabled { background-color: var(--cb-brown-100); cursor: help; }
.cb-card-title { font-size: 15px; font-weight: 500; }
.cb-task-detail-status-select { height: 30px; min-height: 30px; padding-top: 0; padding-bottom: 0; }
.cb-task-details-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 2rem;
  row-gap: 10px;
  align-items: center;
}
.cb-task-details-dl dt { font-size: 13px; margin: 0; display: flex; align-items: center; gap: .35rem; }
.cb-task-details-dl dt svg { flex: 0 0 auto; }
.cb-task-details-dl dd { margin: 0; padding-left: 6px; }
.cb-task-detail-layout .cb-surface { border-radius: 10px; border-color: var(--cb-border-light); }
.cb-task-detail-header-btn { padding: 3px 9px; font-size: 12px; }
.cb-subtask-status-select { padding: 3px 20px 3px 9px; font-size: 12px; }
#subtask-list .cb-search-select-trigger { height: 30px; min-height: 30px; padding: 3px 9px; font-size: 12px; }
#subtask-list .cb-search-select-menu { min-width: 160px; width: max-content; }
.cb-card-divider-full { margin: 16px -16px 12px; border: none; border-top: 1px solid var(--cb-border); }
.cb-task-description-card,
.cb-task-subtasks-card,
.cb-task-details-card { padding-top: 14px; }
.cb-task-detail-layout .cb-activity-feed { margin-bottom: 0; }
.cb-task-detail-layout .cb-task-files > div:last-of-type { margin-bottom: 0 !important; }
.cb-task-detail-layout .cb-activity-icon { flex-basis: 18px; width: 18px; height: 18px; }
.cb-task-detail-layout .cb-activity-item:not(:last-child)::before { top: 20px; left: 8px; }
.cb-task-detail-layout .cb-activity-icon svg { width: 10px; height: 10px; }
.cb-task-detail-layout .small,
.cb-task-detail-layout small,
.cb-task-detail-layout .cb-activity-meta { font-size: 13px; }
.cb-task-detail-layout .cb-task-details-dl dd,
.cb-task-detail-layout .cb-task-file-link,
.cb-task-detail-layout .cb-activity-description { font-size: 14px; }
.cb-app-main > .cb-surface.text-center { background: none; border: none; }
.cb-empty-illustration { width: 160px; height: auto; margin-bottom: 28px !important; }
.cb-empty-suggestions { margin-top: 40px; }
.cb-empty-state-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 160px);
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--cb-border);
  --bs-dropdown-border-radius: var(--cb-radius);
  --bs-dropdown-link-active-bg: var(--cb-brown-100);
  --bs-dropdown-link-active-color: var(--cb-text);
  --bs-dropdown-link-hover-bg: var(--cb-brown-100);
  --bs-dropdown-divider-bg: var(--cb-border-light);
  padding: .35rem;
  box-shadow: var(--cb-shadow);
}
.dropdown-item { border-radius: var(--cb-radius-xs); font-size: .875rem; }
.modal-content {
  border-color: var(--cb-border);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow);
}
#taskCreateModal .modal-dialog { max-width: 520px; }
/* Widen the visual gap between paired fields (Task type/Matter folder,
   File/Priority, Assignees/Due date) beyond the default .g-2 gutter. */
#taskCreateModal .row.g-2 > .col-6:last-child { padding-left: calc(.25rem + 4px); }
.modal-header {
  --bs-modal-header-padding: 1rem 18px; /* +2px over Bootstrap's default 1rem horizontal */
}
.modal-header .modal-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;                      /* -2px from Bootstrap's default .h5 (20px) */
  letter-spacing: normal;
}
.modal-header .btn-close {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 6px;
  background-size: 12px auto;
}
.modal-header, .modal-footer { border-color: var(--cb-border-light); }
.modal-body { padding-left: 18px; padding-right: 18px; }    /* +2px over Bootstrap's default 1rem */
.table { --bs-table-color: var(--cb-text); --bs-table-border-color: var(--cb-border-light); --bs-table-hover-bg: var(--cb-bg); }
.table > thead { color: var(--cb-text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.table > thead th { font-weight: 400; text-transform: none; letter-spacing: normal; padding-top: .85rem; padding-bottom: .85rem; }
.cb-task-table-wrap {
  margin-left: -24px;
  margin-right: -24px;
  background: var(--cb-surface);
}
.cb-task-table-wrap table { margin-bottom: 0; background: var(--cb-surface); }
.cb-task-table-wrap th,
.cb-task-table-wrap td { background-color: var(--cb-surface); }
.cb-task-table-wrap tbody tr:hover th,
.cb-task-table-wrap tbody tr:hover td { background-color: var(--cb-bg); }
.cb-app-main .cb-task-table-wrap th:first-child,
.cb-app-main .cb-task-table-wrap td:first-child { padding-left: 24px; }
.cb-app-main .cb-task-table-wrap th:last-child,
.cb-app-main .cb-task-table-wrap td:last-child { padding-right: 24px; }
.cb-task-table-wrap tbody td { height: 74px; }
.cb-task-table-wrap thead th { height: 50px; color: var(--cb-text-muted); }
.cb-task-toolbar:has(+ .cb-task-table-wrap) { margin-bottom: 0 !important; }
/* Folder card file marks: one tick per file, and past 10 the last three ticks
   give way to a roman numeral of the real total. Ticks and numeral share
   --mark-h so the bars and the letter caps are the same height — set the tick
   height independently and they stop reading as one row of marks. */
.cb-file-marks {
  --mark-h: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}
.cb-file-ticks {
  flex: 0 0 auto;
  height: var(--mark-h);
  width: calc(var(--n, 0) * 5px);
  background: repeating-linear-gradient(
    to right, var(--cb-text-muted) 0 2px, transparent 2px 5px
  );
  border-radius: 1px;
}
/* line-height pinned to --mark-h so the glyph box matches the bars rather than
   the 12px text line it sits in. min-width holds the three slots the ticks
   gave up, keeping short numerals on the tick rhythm. */
.cb-file-roman {
  flex: 0 0 auto;
  min-width: 15px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  line-height: var(--mark-h);
  color: var(--cb-text-muted);
  white-space: nowrap;
}
.cb-folder-row-icon { flex: 0 0 auto; color: var(--cb-text-muted); }
.cb-folder-table-wrap {
  margin-left: -24px;
  margin-right: -24px;
}
.cb-folder-table-wrap table { margin-bottom: 0; background: transparent; }
.cb-folder-table-wrap th,
.cb-folder-table-wrap td { background-color: transparent; }
.cb-app-main .cb-folder-table-wrap th:first-child,
.cb-app-main .cb-folder-table-wrap td:first-child { padding-left: 24px; }
.cb-app-main .cb-folder-table-wrap th:last-child,
.cb-app-main .cb-folder-table-wrap td:last-child { padding-right: 24px; }
.cb-folder-table-wrap tbody td { height: 60px; }
.cb-folder-table-wrap thead th { height: 46px; color: var(--cb-text-muted); font-weight: 500; }
.cb-app-main:has(> .cb-folder-table-wrap) { padding-top: 12px !important; }
.cb-task-table-wrap tbody td:nth-child(4),
.cb-task-table-wrap tbody td:nth-child(5),
.cb-task-table-wrap tbody td:nth-child(6) { font-size: .8rem; }
.cb-task-table-wrap .cb-tag { font-weight: 400; }
.table > thead a { color: inherit; text-decoration: none; }
.table > thead a:hover { color: var(--cb-text); text-decoration: underline; }
.table > tbody td { padding-top: .7rem; padding-bottom: .7rem; }

.cb-priority-flag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 500;
  font-size: .82rem;
}
.cb-priority-flag svg { width: 14px; height: 14px; flex: 0 0 auto; }
.cb-priority-flag--high { color: #dc3545; }
.cb-priority-flag--medium { color: #d49b00; }
.cb-priority-flag--low { color: #7fa66b; }

.cb-status-pill {
  display: inline-flex;
  border-radius: 999px;
  background: #faf6ed;
}
.cb-task-table-wrap .cb-status-pill .form-select,
.cb-task-table-wrap .cb-status-pill .cb-search-select-trigger {
  min-height: 30px;
  border: none;
  background-color: transparent;
  box-shadow: none;
  border-radius: 999px;
  padding: .3rem .75rem .3rem .75rem;
  font-weight: 500;
  font-size: .8rem;
  color: #8a6d1f;
}
.cb-task-table-wrap .cb-status-pill .form-select { padding-right: 1.75rem; }
.cb-task-table-wrap .cb-status-pill .cb-search-select-trigger { gap: .5rem; }
.cb-task-table-wrap .cb-status-pill .cb-search-select-trigger:hover { background-color: rgba(0, 0, 0, .04); }
.cb-task-table-wrap .cb-status-pill .cb-search-select-chevron svg { width: 12px; height: 12px; }
.cb-task-table-wrap .cb-status-pill .cb-search-select-menu { min-width: 9.5rem; }
.cb-status-pill--todo { background: #fdf0d9; }
.cb-task-table-wrap .cb-status-pill--todo .form-select,
.cb-task-table-wrap .cb-status-pill--todo .cb-search-select-trigger { color: #96650f; }
.cb-status-pill--in_progress { background: #e1f0fc; }
.cb-task-table-wrap .cb-status-pill--in_progress .form-select,
.cb-task-table-wrap .cb-status-pill--in_progress .cb-search-select-trigger { color: #1c5c94; }
.cb-status-pill--under_review { background: #f0e5fb; }
.cb-task-table-wrap .cb-status-pill--under_review .form-select,
.cb-task-table-wrap .cb-status-pill--under_review .cb-search-select-trigger { color: #6b3fa0; }
.cb-status-pill--done { background: #e5f3e2; }
.cb-task-table-wrap .cb-status-pill--done .form-select,
.cb-task-table-wrap .cb-status-pill--done .cb-search-select-trigger { color: #2f6e2b; }
.list-group { --bs-list-group-border-color: var(--cb-border-light); }

/* ---- 6. Brand mark ----------------------------------------------------- */
.cb-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--cb-font-display);
  font-weight: 400;
  font-size: 1.22rem;
  color: var(--cb-text);
  text-decoration: none;
}
.cb-brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: .12rem;
  line-height: 1;
}
.cb-brand-mark {
  width: 28px;
  height: 28px;
  display: inline-block;
  background: url("../img/logo.81b7df2b810a.svg") center / contain no-repeat;
}
.cb-header-brand { max-width: 12rem; }
.cb-header-workspace-name {
  max-width: 8.75rem;
  color: var(--cb-text-muted);
  font-family: var(--cb-font-sans);
  font-size: .7rem;
  font-weight: 500;
  line-height: 1;
}

/* ---- 7. Compact top navigation ---------------------------------------- */
.cb-app-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns .22s ease;
}
.cb-app-content { min-width: 0; background-color: #fdfdfc; }
.cb-sidebar {
  position: sticky;
  top: 0;
  z-index: 1040;
  display: flex;
  width: 220px;
  height: 100vh;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--cb-border-light);
  background: #fbfbfa;
  transition: width .22s ease;
}
.cb-sidebar-brand {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--cb-border-light);
}
.cb-sidebar-brand .cb-brand { gap: .45rem; font-size: 1.14rem; }
.cb-sidebar-brand .cb-brand-mark { width: 24px; height: 24px; }
.cb-sidebar-close {
  display: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cb-text-muted);
  font-size: 1.5rem;
  line-height: 1;
}
.cb-sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: .75rem .7rem 1rem;
}
.cb-sidebar-section {
  margin: .9rem .45rem 4.6px;
  padding-top: 8px;
  color: var(--cb-text-faint);
  font-family: var(--cb-font-sans);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: font-size .18s ease, letter-spacing .18s ease, margin .18s ease;
}
.cb-sidebar-link {
  display: flex;
  width: 100%;
  height: 38px;
  min-height: 38px;
  align-items: center;
  gap: .65rem;
  padding: .45rem .55rem;
  border: 1px solid transparent;
  border-radius: .6rem;
  color: var(--cb-text);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  box-sizing: border-box;
  transition: width .22s ease, height .22s ease, gap .22s ease, padding .22s ease, min-height .22s ease, margin .22s ease;
}
/* Subtle "alpha" tag beside an in-progress nav item (e.g. Inbox). */
.cb-alpha-tag {
  margin-left: -.3rem;
  padding: .01rem .32rem;
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  color: var(--cb-text-faint);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.5;
}
.cb-sidebar-link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Icon paths carry their own stroke-width attribute (varies per icon source),
   which otherwise wins over the inherited value above. Force them uniform. */
.cb-sidebar-link svg path[stroke] { stroke-width: 1.3; }
/* Icons authored on a 24x24 viewBox (vs. the sidebar's usual 16x16) need a
   proportionally larger stroke-width to render at the same visual weight
   once scaled down to the shared 17px icon box. */
.cb-sidebar-link svg.cb-icon-vb24 path[stroke] { stroke-width: 1.95; }
.cb-sidebar-link:hover { background: var(--cb-bg); color: var(--cb-text); }
.cb-sidebar-sublink {
  width: 100%;
  min-height: 32px;
  padding-left: 2.2rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cb-text-muted);
  font-size: .78rem;
  text-align: left;
}
.cb-sidebar-link.active {
  border-color: var(--cb-border);
  background: var(--cb-surface);
  box-shadow: var(--cb-shadow-sm);
  font-weight: 600;
}
.cb-sidebar-account-wrap {
  flex: 0 0 auto;
  padding: .75rem;
  border-top: 1px solid var(--cb-border-light);
}
.cb-sidebar-account {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: .65rem;
  padding: .25rem;
  border: 0;
  border-radius: .6rem;
  background: transparent;
  color: var(--cb-text);
  text-align: left;
}
.cb-sidebar-account:hover,
.cb-sidebar-account:focus-visible { background: var(--cb-surface-soft); outline: 0; }
.cb-sidebar-account-avatar {
  position: relative;
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #d8ebfb;
  color: #36516a;
  font-size: .72rem;
  font-weight: 600;
}
.cb-sidebar-account-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cb-sidebar-account-copy { display: grid; min-width: 0; line-height: 1.15; }
.cb-sidebar-account-copy strong { font-size: .78rem; font-weight: 500; }
.cb-sidebar-account-copy small { margin-top: .16rem; color: var(--cb-text-muted); font-size: .65rem; }
.cb-sidebar-account-wrap .cb-account-menu { margin-left: .25rem !important; }

/* Desktop sidebar collapse: shrinks to an icon-only rail. Mirrors the
   collapse control used on the Ask AI / Search recent-chats panel. */
.cb-sidebar-collapse-toggle {
  position: absolute;
  top: 18px;
  right: -12px;
  z-index: 5;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 5px;
  border: 1px solid var(--cb-border);
  border-radius: .5rem;
  background: var(--cb-surface);
  color: var(--cb-text-muted);
}
.cb-sidebar-collapse-toggle:hover { color: var(--cb-text); border-color: var(--cb-brown); }
.cb-sidebar-collapse-toggle svg { width: 12px; height: 12px; transition: transform .18s ease; }
html.cb-sidebar-collapsed .cb-sidebar-collapse-toggle svg { transform: scaleX(-1); }
.cb-sidebar-collapse-toggle:hover::after,
.cb-sidebar-collapse-toggle:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 2000;
  padding: .35rem .65rem;
  border-radius: .4rem;
  background: var(--cb-text);
  color: #fff;
  font-family: var(--cb-font-sans);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--cb-shadow);
  pointer-events: none;
  transform: translateY(-50%);
}

html.cb-sidebar-collapsed .cb-app-shell { grid-template-columns: 68px minmax(0, 1fr); }
html.cb-sidebar-collapsed:not(:has(.cb-sidebar-nav:hover, .cb-sidebar-account-wrap:hover)) .cb-sidebar { width: 68px; }
/* Hovering a collapsed sidebar's nav or account footer (not the brand
   header, which just holds the logo and the pin/collapse toggle) expands
   it as a flyout overlay. The grid column itself stays 68px (page content
   never reflows) since the sidebar keeps its normal sticky/in-flow
   position — it just renders wider than its own track and overflows on
   top of the content beside it (grid tracks don't clip by default).
   Switching to position:fixed here would pull it out of the grid's flow
   entirely, which makes the grid reassign the content column into the
   now-empty first track instead — the "right side breaks" bug. Reusing
   the same collapsed-state overrides below via
   :not(:has(.cb-sidebar-nav:hover, .cb-sidebar-account-wrap:hover)) means
   hovering simply falls back to the normal expanded look instead of
   needing a duplicate set of rules. */
html.cb-sidebar-collapsed .cb-sidebar:has(.cb-sidebar-nav:hover, .cb-sidebar-account-wrap:hover) {
  width: 220px;
  z-index: 1045;
  box-shadow: var(--cb-shadow);
}
html.cb-sidebar-collapsed:not(:has(.cb-sidebar-nav:hover, .cb-sidebar-account-wrap:hover)) .cb-sidebar-brand { justify-content: center; padding: .75rem .5rem; }
html.cb-sidebar-collapsed:not(:has(.cb-sidebar-nav:hover, .cb-sidebar-account-wrap:hover)) .cb-sidebar-brand .cb-brand { gap: 0; }
html.cb-sidebar-collapsed:not(:has(.cb-sidebar-nav:hover, .cb-sidebar-account-wrap:hover)) .cb-sidebar-sublink { display: none; }

/* Sidebar label text fades and shrinks away rather than snapping with
   display:none, so the collapse/expand feels smooth end to end. */
.cb-sidebar-brand .cb-brand > span:not(.cb-brand-mark),
.cb-sidebar-link > span,
.cb-sidebar-account-copy {
  box-sizing: border-box;
  overflow: hidden;
  max-width: 180px;
  opacity: 1;
  transition: opacity .16s ease, max-width .22s ease;
}
.cb-sidebar-brand .cb-brand > span:not(.cb-brand-mark),
.cb-sidebar-link > span {
  white-space: nowrap;
}
html.cb-sidebar-collapsed:not(:has(.cb-sidebar-nav:hover, .cb-sidebar-account-wrap:hover)) .cb-sidebar-brand .cb-brand > span:not(.cb-brand-mark),
html.cb-sidebar-collapsed:not(:has(.cb-sidebar-nav:hover, .cb-sidebar-account-wrap:hover)) .cb-sidebar-link > span,
html.cb-sidebar-collapsed:not(:has(.cb-sidebar-nav:hover, .cb-sidebar-account-wrap:hover)) .cb-sidebar-account-copy {
  max-width: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
  border-width: 0;
}

/* Centre the icon itself in the rail; padding-block (and therefore the
   vertical rhythm between items) is untouched so spacing still matches
   the expanded layout. gap:0 removes the reserved space the (now
   zero-width) label span otherwise still claims, which was pulling the
   icon off-centre. */
html.cb-sidebar-collapsed:not(:has(.cb-sidebar-nav:hover, .cb-sidebar-account-wrap:hover)) .cb-sidebar-link {
  justify-content: center;
  gap: 0;
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin-inline: 2.8px;
  padding: 0;
  box-sizing: border-box;
}

/* Let the hover tooltip escape the sidebar nav's scroll container instead
   of being clipped by its overflow. */
html.cb-sidebar-collapsed .cb-sidebar-nav { overflow: visible; }

/* Custom tooltip on hover, since the label text is hidden when collapsed.
   Suppressed once hovering expands the whole panel, since the real label
   is visible then and a tooltip on top of it would be redundant. */
.cb-sidebar-link { position: relative; }
html.cb-sidebar-collapsed:not(:has(.cb-sidebar-nav:hover, .cb-sidebar-account-wrap:hover)) .cb-sidebar-link:hover::after,
html.cb-sidebar-collapsed:not(:has(.cb-sidebar-nav:hover, .cb-sidebar-account-wrap:hover)) .cb-sidebar-link:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 2000;
  padding: .35rem .65rem;
  border-radius: .4rem;
  background: var(--cb-text);
  color: #fff;
  font-family: var(--cb-font-sans);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--cb-shadow);
  pointer-events: none;
  transform: translateY(-50%);
}

/* Section labels stay visible when collapsed, just smaller and centred,
   so the vertical grouping/spacing still reads the same as expanded. */
html.cb-sidebar-collapsed:not(:has(.cb-sidebar-nav:hover, .cb-sidebar-account-wrap:hover)) .cb-sidebar-section {
  margin-inline: 0;
  padding-inline: 4px;
  padding-top: 12px;
  padding-bottom: 0;
  font-size: .5rem;
  letter-spacing: .03em;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
}
html.cb-sidebar-collapsed:not(:has(.cb-sidebar-nav:hover, .cb-sidebar-account-wrap:hover)) .cb-sidebar-account { justify-content: center; gap: 0; padding: .25rem 0; }
@media (max-width: 991.98px) {
  .cb-sidebar-collapse-toggle { display: none; }
}
.cb-sidebar-toggle {
  display: none;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--cb-border);
  border-radius: .6rem;
  background: var(--cb-surface);
  color: var(--cb-text);
}
.cb-sidebar-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.cb-sidebar-backdrop { display: none; }

/* ---- Repository Inbox ------------------------------------------------- */
.cb-button-icon {
  width: 1rem;
  height: 1rem;
  margin-right: .25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.15rem;
}
.cb-inbox-intake {
  display: grid;
  grid-template-columns: minmax(18rem, 1.25fr) minmax(15rem, .75fr);
  overflow: hidden;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  background: var(--cb-surface);
}
.cb-inbox-dropzone {
  display: flex;
  min-height: 118px;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: 1rem;
  border-right: 1px dashed var(--cb-border);
  background: var(--cb-surface-soft);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.cb-inbox-dropzone:hover { background: var(--cb-sage-100); border-color: var(--cb-green); }
.cb-inbox-dropzone-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid var(--cb-border);
  border-radius: 50%;
  background: var(--cb-surface);
}
.cb-inbox-dropzone-icon svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cb-inbox-dropzone > span:last-child { display: grid; gap: .2rem; }
.cb-inbox-dropzone small { color: var(--cb-text-muted); }
.cb-inbox-intake-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
  padding: 1rem 1.15rem;
  color: var(--cb-text-muted);
  font-size: .82rem;
}
.cb-inbox-intake-copy strong { color: var(--cb-text); font-size: .9rem; }
.cb-inbox-ocr-note { font-size: .72rem; }
.cb-inbox-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.cb-inbox-stats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: .7rem .85rem;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  background: var(--cb-surface);
  color: var(--cb-text-muted);
  font-size: .8rem;
  text-decoration: none;
}
.cb-inbox-stats strong { color: var(--cb-text); font-size: 1.2rem; }
.cb-inbox-toolbar { display: flex; align-items: center; gap: .5rem; }
.cb-inbox-toolbar .form-select { width: 12rem; }
.cb-inbox-list { display: grid; gap: .55rem; }
.cb-inbox-item {
  display: grid;
  grid-template-columns: 54px minmax(12rem, 1fr) minmax(25rem, auto);
  align-items: center;
  gap: .8rem;
  padding: .65rem;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  background: var(--cb-surface);
}
.cb-inbox-preview {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  overflow: hidden;
  border-radius: .5rem;
  background: var(--cb-surface-soft);
  color: var(--cb-text-muted);
  font-size: .66rem;
  font-weight: 700;
  text-decoration: none;
}
.cb-inbox-preview img { width: 100%; height: 100%; object-fit: cover; }
.cb-inbox-file-copy { min-width: 0; }
.cb-inbox-file-copy > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-inbox-status {
  display: inline-flex;
  margin-top: .35rem;
  padding: .16rem .45rem;
  border-radius: 999px;
  background: var(--cb-blue);
  color: var(--cb-blue-ink);
  font-size: .68rem;
  font-weight: 600;
}
.cb-inbox-status--ready { background: var(--cb-mint); color: var(--cb-mint-ink); }
.cb-inbox-status--needs_attention { background: #fdecec; color: #b4232f; }
.cb-inbox-file-actions { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.cb-inbox-file-actions form { display: flex; align-items: center; gap: .4rem; }
.cb-inbox-file-actions .form-select,
.cb-inbox-file-actions .cb-search-select-picker { width: min(22rem, 28vw); }

@media (max-width: 991.98px) {
  .cb-inbox-item { grid-template-columns: 48px minmax(0, 1fr); }
  .cb-inbox-preview { width: 48px; height: 48px; }
  .cb-inbox-file-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .cb-inbox-file-actions form { flex: 1 1 auto; }
  .cb-inbox-file-actions .form-select,
  .cb-inbox-file-actions .cb-search-select-picker { width: auto; flex: 1 1 auto; }
}
@media (max-width: 767.98px) {
  .cb-inbox-intake { grid-template-columns: 1fr; }
  .cb-inbox-dropzone { border-right: 0; border-bottom: 1px dashed var(--cb-border); }
  .cb-inbox-stats { grid-template-columns: 1fr; }
  .cb-inbox-toolbar { flex-wrap: wrap; }
  .cb-inbox-toolbar .cb-task-search { flex-basis: 100%; }
  .cb-inbox-toolbar .form-select { width: auto; flex: 1 1 10rem; }
  .cb-inbox-file-actions { flex-wrap: wrap; }
  .cb-inbox-file-actions form { flex-basis: 100%; }
}
@media (max-width: 479.98px) {
  .cb-inbox-file-actions form { flex-wrap: wrap; }
  .cb-inbox-file-actions form .form-select,
  .cb-inbox-file-actions form .cb-search-select-picker,
  .cb-inbox-file-actions form .btn { width: 100%; }
}

.cb-app-menu-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .65rem;
  border: 1px solid var(--cb-border);
  border-radius: .65rem;
  background: var(--cb-surface);
  color: var(--cb-text);
  font-size: .86rem;
  font-weight: 600;
}
.cb-app-menu-toggle:hover,
.cb-app-menu-toggle:focus-visible {
  border-color: var(--cb-brown);
  box-shadow: var(--cb-focus-ring);
  outline: 0;
}
.cb-app-menu-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-app-menu-toggle .cb-app-menu-chevron { width: 12px; height: 12px; }
.cb-app-menu-dropdown { min-width: 12rem; }
.cb-app-menu-dropdown .dropdown-item.active {
  background: var(--cb-brown);
  color: #fff;
}
.cb-context-nav {
  position: sticky;
  top: 0;
  z-index: 1020;
  min-height: 60px;
  padding: .35rem 24px;
  border-bottom: 1px solid var(--cb-border-light);
}
/* Judgment search facets + detail-page cite lists share this row style. */
.cb-facet-row { color: inherit; }
.cb-facet-row:hover { background: rgba(0, 0, 0, .05); }
.cb-facet-row.active { background: rgba(13, 110, 253, .1); color: #0d6efd; font-weight: 600; }
.cb-facet-checkbox {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  background: #fff;
}
.cb-facet-checkbox.checked {
  background: var(--cb-brown);
  border-color: var(--cb-brown);
}
.cb-facet-checkbox.checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.cb-context-title {
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--cb-text-muted);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.25;
}
.cb-context-title a:not(.btn) { color: var(--cb-text); text-decoration: none; }
.cb-context-title a:not(.btn):hover { text-decoration: underline; }
.cb-context-title .breadcrumb {
  flex-wrap: nowrap;
  overflow: hidden;
}
.cb-context-title .breadcrumb-item:not(:last-child) { flex-shrink: 0; }
.cb-context-title .breadcrumb-item:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-context-actions:empty { display: none !important; }
.cb-context-actions { gap: 12px; }
.cb-context-actions .btn {
  min-height: 32px;
  padding: .3rem .65rem;
  font-size: .8rem;
}
.cb-context-actions .btn-primary { padding-left: 16px; padding-right: 16px; }
/* Uniform, bolder stroke-weight for the small inline action icons (Upload
   file, Sort, List/Grid view, Share link, Back, dropdown-item icons, ...)
   so they read consistently across the app regardless of source SVG. */
.btn svg[aria-hidden] path[stroke],
.btn svg[aria-hidden] circle[stroke],
.dropdown-item svg[aria-hidden] path[stroke],
.dropdown-item svg[aria-hidden] circle[stroke] {
  stroke-width: 2;
}
/* Uniform icon size for every inline SVG inside a button, regardless of the
   width/height attributes on the source SVG. */
.btn svg[aria-hidden] {
  width: 16px;
  height: 16px;
}
/* "Nothing to do" state for a step control (e.g. Previous on page 1) that
   should still look/feel interactive rather than fully disabled — only the
   label fades, the button chrome stays normal. */
.cb-btn-text-muted { color: var(--cb-text-faint); }
.cb-btn-text-muted:hover { color: var(--cb-text-faint); }
/* "Page [n] of N" as a single control (not three input-group segments) that
   matches the height and pill shape of the surrounding .btn-sm toolbar buttons. */
.pdf-page-control {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 30px;
  padding: .34rem .7rem;
  font-size: .8125rem;
  color: var(--cb-text-muted);
  background: #fff;
  border: 1px solid var(--cb-border-light);
  border-radius: var(--cb-radius);
}
.pdf-page-control input {
  width: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: .8125rem;
  color: var(--cb-text);
  -moz-appearance: textfield;
}
.pdf-page-control input::-webkit-outer-spin-button,
.pdf-page-control input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pdf-page-control input:focus {
  outline: 0;
}
/* Zoom out/in clubbed into a single pill, matching .pdf-page-control. */
.pdf-zoom-control {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  background: #fff;
  border: 1px solid var(--cb-border-light);
  border-radius: var(--cb-radius);
  overflow: hidden;
}
.pdf-zoom-control button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #404040;
  cursor: pointer;
}
.pdf-zoom-control button:hover { background: var(--cb-surface-soft); }
.pdf-zoom-divider {
  width: 1px;
  height: 18px;
  background: var(--cb-border-light);
}
.cb-context-actions .cb-action-menu {
  min-width: 32px;
  min-height: 32px;
  padding: .2rem .45rem;
}
.cb-account-menu-button {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cb-brown);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
}
.cb-header-icon-button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
}
.cb-context-actions .cb-header-icon-button { padding: 0; }
.cb-header-icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-account-menu-button img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cb-account-menu-fallback {
  display: inline-grid;
  place-items: center;
}
.cb-account-menu-button:hover,
.cb-account-menu-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(70, 38, 8, .14);
  outline: 0;
}
.cb-account-menu {
  width: min(340px, calc(100vw - 1rem));
  overflow: hidden;
  border-color: var(--cb-border);
  border-radius: .9rem;
  box-shadow: var(--cb-shadow);
}
/* Lighter internal section dividers than Bootstrap's default border-top/
   border-bottom utility colour, which reads too heavy inside this menu. */
.cb-account-menu .border-top,
.cb-account-menu .border-bottom {
  border-color: var(--cb-border-light) !important;
}
.cb-account-menu-identity { min-width: 0; }
.cb-account-menu-identity .fw-semibold { font-size: 15px; font-weight: 500 !important; }
.cb-account-menu .cb-eyebrow { font-size: 10.5px; font-weight: 400; }
.cb-team-option.active .text-truncate.flex-grow-1 { font-size: 13.4px; font-weight: 500; }
.cb-team-switcher {
  max-height: min(320px, 45vh);
  overflow-y: auto;
}
.cb-team-option {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 42px;
  padding: .4rem .5rem;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: var(--cb-text);
  text-align: left;
  font-size: .9rem;
}
/* Both the hover and selected states match the same colour every other
   dropdown item in the app already uses on hover (--bs-dropdown-link-hover-bg),
   instead of a one-off shade unique to this menu. */
.cb-team-option:hover { background: var(--cb-brown-100); }
.cb-team-option.active {
  background: var(--cb-brown-100);
  font-weight: 600;
}
.cb-team-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-grid;
  place-items: center;
  border-radius: .5rem;
  background: var(--cb-border);
  color: var(--cb-text);
  font-size: .78rem;
  font-weight: 700;
}

/* ---- 8. Tags / chips (Trello-style label with dot) -------------------- */
.cb-tag {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: .4rem;
  min-height: 26px;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: var(--cb-surface);
  font-size: .8rem;
  font-weight: 500;
  color: var(--cb-text);
  line-height: 1.4;
}
/* Marks a folder as a top-level matter (blue) vs. a sub-folder nested
   inside one (sage) — matching each folder card's own accent colour. */
.cb-matter-bar {
  display: inline-block;
  width: 5px;
  height: 28px;
  border-radius: 3px;
  background: var(--cb-folder-tab);
  flex-shrink: 0;
}
.cb-matter-bar--sub { background: var(--cb-folder-tab-sub); }
.cb-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cb-tag-color, var(--cb-text-faint));
}
.cb-tag.border-0 { border: 1px dashed var(--cb-border) !important; }
.cb-tag.border-0::before { display: none; }
.cb-tag--orange { --cb-tag-color: var(--cb-tag-orange); color: var(--cb-tag-orange); }
.cb-tag--green  { --cb-tag-color: var(--cb-tag-green);  color: var(--cb-tag-green); }
.cb-tag--blue   { --cb-tag-color: var(--cb-tag-blue);   color: var(--cb-tag-blue); }
.cb-tag--purple { --cb-tag-color: var(--cb-tag-purple); color: var(--cb-tag-purple); }
.cb-tag--red    { --cb-tag-color: var(--cb-tag-red);    color: var(--cb-tag-red); }
.cb-tag--teal   { --cb-tag-color: var(--cb-tag-teal);   color: var(--cb-tag-teal); }

/* Removable filter chip */
.cb-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .5rem .3rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: var(--cb-surface);
  font-size: .82rem;
}
.cb-chip .btn-close { font-size: .55rem; }

/* ---- 9. Folder card ---------------------------------------------------- */
.cb-folder {
  /* Blue backing layer; the white surface below sits inset from the top so
     this peeks out as a thin rounded strip, like a folder behind a page. */
  position: relative;
  background: var(--cb-folder-tab);
  border-radius: var(--cb-radius-lg);
  padding-top: 10px;
}
/* Sub-folder cards get a distinct pastel backing to set them apart from matters. */
.cb-folder--sub { background: var(--cb-folder-tab-sub); }
.cb-folder-surface {
  position: relative;
  height: 100%;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 16px 18px 18px;
  box-shadow: var(--cb-shadow-sm);
  transition: box-shadow .15s ease;
}
.cb-folder:hover .cb-folder-surface { box-shadow: var(--cb-shadow); }
.cb-folder-surface .mt-1 { margin-top: 5px !important; }
/* Lift a card above its neighbours while its action menu is open, so the
   dropdown is never painted under the next card. */
.cb-folder:has(.dropdown-menu.show) { z-index: 5; }
/* Long folder names must wrap instead of pushing the card / action menu out. */
.cb-folder .fw-semibold {
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: "Inter", var(--cb-font-sans);
}
.cb-action-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--cb-border);
  color: var(--cb-text);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}
.cb-action-menu:hover,
.cb-action-menu:focus {
  border-color: var(--cb-brown);
  box-shadow: var(--cb-focus-ring);
}

/* ---- Long-name safety nets ------------------------------------------------
   Flex children need min-width:0 before text-truncate can ellipsize them, and
   long titles in breadcrumbs must wrap rather than overflow the header. */
.min-w-0 { min-width: 0; }

/* Kebab (⋮) action menus were too faint to notice (BugList #22): make the dots
   bold and dark so the action affordance is obvious. */
button[aria-label$="actions"] {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--cb-text);
}
/* Breadcrumb items are flex children; they need min-width:0 to shrink below
   their content width so the long active crumb can wrap instead of forcing the
   header (and whole page) wider. */
.breadcrumb { flex-wrap: wrap; min-width: 0; }
.breadcrumb-item { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.breadcrumb-item a { text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ---- 10. Stat cards (dashboard) --------------------------------------- */
.cb-stat {
  border-radius: var(--cb-radius);
  padding: .9rem 1rem;
  border: 1px solid transparent;
}
.cb-stat .cb-stat-num { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.cb-stat .cb-stat-label { color: var(--cb-text-muted); margin-top: .35rem; }
.cb-stat--pink { background: var(--cb-pink); }
.cb-stat--blue { background: var(--cb-blue); }
.cb-stat--mint { background: var(--cb-mint); }

/* ---- 11. Badges -------------------------------------------------------- */
.cb-badge-today {
  background: var(--cb-pink);
  color: var(--cb-pink-ink);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .25rem .6rem;
  border-radius: 999px;
}

/* ---- 12. Alerts (flash messages) -------------------------------------- */
.alert { border-radius: var(--cb-radius); border: 1px solid var(--cb-border); }
.alert-success { --bs-alert-color: #285c38; --bs-alert-bg: var(--cb-mint); --bs-alert-border-color: #c4dec9; }
.alert-danger { --bs-alert-color: #8f222a; --bs-alert-bg: var(--cb-pink); --bs-alert-border-color: #edc5c8; }
.alert-warning { --bs-alert-color: #6b4a12; --bs-alert-bg: #faf0d8; --bs-alert-border-color: #ead6a7; }

/* Toast notifications (window.casebaseToast) always dock bottom-center. */
.toast.text-bg-success {
  background-color: #909C33 !important;
  color: #fff !important;
}
.toast .btn-close {
  width: 16px;
  height: 16px;
  padding: 0;
  background-size: 16px;
}
.alert-info { --bs-alert-color: #275b89; --bs-alert-bg: var(--cb-sky-100); --bs-alert-border-color: #c9dcec; }
.text-bg-danger { background-color: #c9343d !important; }
.text-bg-secondary { background-color: #77716a !important; }
.cb-header-actions .btn { white-space: nowrap; }

/* ---- 12b. Universal search -------------------------------------------- */
#universal-search { position: relative; min-width: 420px; }
#universal-search input { width: 100%; }
.cb-search-controls { display: flex; align-items: center; }
.cb-search-input-shell {
  height: 44px;
  padding: 6px 0 6px 6px;
  justify-content: space-between;
  border: 1px solid #d4d4d4;
  border-radius: 100px;
  background: #f4f6fd;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .02);
}
.cb-search-mode {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.cb-search-mode button,
.cb-search-mode a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 92px;
  height: 32px;
  padding: 8px 14px 8px 10px;
  border: 1px solid transparent;
  border-radius: 30px;
  background: transparent;
  color: #404040;
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
}
.cb-search-mode button svg,
.cb-search-mode a svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.cb-search-sparkle { width: 20px; height: 20px; object-fit: contain; }
.cb-search-mode button.active,
.cb-search-mode a.active {
  background: #ffffff;
  border-color: #e6e6e6;
  color: #404040;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(92, 83, 63, .08);
}
.cb-search-divider {
  flex-shrink: 0;
  width: 1px;
  height: 22px;
  margin: 0 13px;
  background: #d9d9d9;
}
.cb-search-input-wrap { position: relative; min-width: 0; flex: 1 1 auto; }
.cb-search-input-shell .form-control {
  border: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 500;
  padding-left: 0;
}
.cb-search-widget .form-control { padding-right: 5.75rem; }
.cb-search-goto-ai {
  position: absolute;
  top: 50%;
  right: 44px;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid var(--cb-border);
  border-radius: 32px;
  background: var(--cb-surface);
  color: var(--cb-text-muted);
}
.cb-search-goto-ai:hover { color: var(--cb-text); border-color: #d4d1c9; }
.cb-search-goto-ai svg { width: 16px; height: 16px; }
.cb-ask-ai-submit {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 30px;
  height: 30px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  padding: 8px;
  border: 0;
  border-radius: 32px;
  background: #391e03;
  color: #fff;
}
.cb-ask-ai-submit svg {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
}
.cb-ask-ai-answer { padding: .85rem .9rem; }
.cb-ask-ai-scope { margin-bottom: .45rem; color: var(--cb-text-faint); font-size: .72rem; }
.cb-ask-ai-text { margin: 0; white-space: pre-wrap; font-size: .88rem; line-height: 1.5; }
.cb-ask-ai-sources { margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--cb-border-light); }
.cb-ask-ai-sources-title { margin-bottom: .35rem; font-size: .72rem; font-weight: 700; color: var(--cb-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.cb-ask-ai-source { display: block; padding: .35rem 0; color: var(--cb-text); text-decoration: none; font-size: .8rem; }
.cb-ask-ai-source:hover .cb-ask-ai-source-title { text-decoration: underline; }
.cb-ask-ai-source-title { font-weight: 600; }
.cb-ask-ai-source-excerpt { margin-top: .12rem; color: var(--cb-text-muted); line-height: 1.35; }
.cb-ask-ai-md { white-space: normal; }
.cb-ask-ai-md > :first-child { margin-top: 0; }
.cb-ask-ai-md > :last-child { margin-bottom: 0; }
.cb-ask-ai-md p, .cb-ask-ai-md ul, .cb-ask-ai-md ol, .cb-ask-ai-md blockquote, .cb-ask-ai-md table { margin: 0 0 .65rem; }
.cb-ask-ai-md ul, .cb-ask-ai-md ol { padding-left: 1.4rem; }
.cb-ask-ai-md li + li { margin-top: .2rem; }
.cb-ask-ai-md h1, .cb-ask-ai-md h2, .cb-ask-ai-md h3, .cb-ask-ai-md h4, .cb-ask-ai-md h5, .cb-ask-ai-md h6 { margin: 1rem 0 .4rem; font-size: 1rem; font-weight: 700; }
.cb-ask-ai-md blockquote { padding-left: .75rem; border-left: 3px solid var(--cb-border-light); color: var(--cb-text-muted); }
.cb-ask-ai-md th, .cb-ask-ai-md td { padding: .25rem .5rem; border: 1px solid var(--cb-border-light); font-size: .85em; }
.cb-ask-ai-md code { font-size: .85em; }
.cb-cite { display: inline-block; min-width: 1.1rem; margin: 0 .06rem; padding: 0 .3rem; border-radius: 999px; background: var(--cb-brown-100); color: var(--cb-brown-700); font-size: .66rem; font-weight: 700; line-height: 1.1rem; text-align: center; text-decoration: none; vertical-align: .25em; }
.cb-cite:hover { background: var(--cb-brown-700); color: #fff; }
.cb-ask-ai-source { scroll-margin-top: 5rem; border-radius: .4rem; }
.cb-ask-ai-source:target { background: var(--cb-brown-100); box-shadow: 0 0 0 .45rem var(--cb-brown-100); }
.cb-search-history-heading {
  padding: .55rem .75rem .3rem;
  color: var(--cb-text-faint);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cb-search-history-item { border-top: 0; background: transparent; cursor: pointer; }
.cb-search-history-query { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-search-history-scope { color: var(--cb-text-faint); font-size: .72rem; }
.cb-search-creator { display: flex; align-items: center; gap: .4rem; font-size: .78rem; }
/* Scope picker: matters and their files in one nested list */
.cb-search-scope-panel { width: 320px; }
/* A deep matter path would otherwise stretch the chip wide enough to wrap the
   whole filter row onto a second line. The full path is in the chip's title. */
/* Never shrinks: how many files are in scope is the point of the filter, so
   it must survive a long matter path being cut. */
.cb-search-scope-chip-count {
  flex: 0 0 auto;
  padding-left: .4rem;
  border-left: 1px solid var(--cb-border);
  color: var(--cb-text-muted);
  font-weight: 400;
}
.cb-search-scope-label {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-search-scope-tree {
  display: grid;
  gap: 1px;
  max-height: 320px;
  overflow-x: hidden;
  overflow-y: auto;
}
.cb-search-scope-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  /* Grid items default to min-width:auto, so without this the row itself
     refuses to shrink and a long name overflows the panel. */
  min-width: 0;
  /* Depth comes from the template as --cb-depth, so a flat list reads as a tree. */
  padding: .25rem .4rem .25rem calc(.4rem + var(--cb-depth, 0) * .85rem);
  border-radius: var(--cb-radius-sm);
  font-size: .78rem;
  cursor: pointer;
}
.cb-search-scope-row:hover { background: rgba(0, 0, 0, .04); }
.cb-search-scope-row span:not(.cb-search-scope-count) {
  /* Without min-width a flex child refuses to shrink, so a long matter name
     pushes the file count out of the panel instead of ellipsising. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-search-scope-row[hidden] { display: none; }
.cb-search-scope-count {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--cb-text-faint);
  font-size: .68rem;
}
.cb-search-scope-file { color: var(--cb-text-muted); }
.cb-search-scope-files[hidden] { display: none; }
.cb-search-scope-files .cb-search-file-actions {
  padding: .15rem .4rem .25rem calc(.4rem + var(--cb-depth, 0) * .85rem);
}
/* File picker inside the search filter chips */
.cb-search-file-panel {
  /* Centred under its chip rather than left-anchored like the smaller "Created
     by" panel: this one is 290px and the Files chip sits mid-row, so on a phone
     a left-anchored panel runs off the right edge. */
  left: 50%;
  transform: translateX(-50%);
  width: 290px;
  max-width: calc(100vw - 24px);
}
.cb-search-file-search {
  width: 100%;
  padding: .3rem .5rem;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  background: var(--cb-surface);
  font-size: .78rem;
}
.cb-search-file-actions { display: flex; gap: .6rem; }
.cb-search-file-actions button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cb-text-muted);
  font-size: .72rem;
  text-decoration: underline;
}
.cb-search-file-actions button:hover { color: var(--cb-text); }
.cb-search-file-list { display: grid; gap: .35rem; max-height: 260px; overflow-y: auto; }
/* .cb-search-creator is display:flex, which beats the browser's [hidden] rule. */
.cb-search-file-list [data-file-row][hidden] { display: none; }
.cb-search-file-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-search-file-hint { color: var(--cb-text-faint); font-size: .68rem; }
@media (max-width: 575.98px) {
  /* A floating 320px panel cannot be kept on a 375px screen by width alone —
     its left edge is wherever the chip landed. Drop it into the flow instead,
     full width, where it cannot overflow at any chip position. */
  [data-scope-picker] { width: 100%; }
  .cb-search-scope-panel,
  .cb-search-file-panel {
    position: static;
    width: 100%;
    max-width: 100%;
    transform: none;
  }
}
/* Search results page (/search/) */
.cb-search-page { max-width: 1080px; margin: 0 auto; }
.cb-search-page-mode {
  margin-bottom: .8rem;
  height: 44px;
  padding: 6px 8px 6px 6px;
  border: 1px solid #d4d4d4;
  background: #f4f6fd;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .02);
}
.cb-search-page-mode button,
.cb-search-page-mode a {
  width: auto;
  height: 32px;
  padding: 8px 12px;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
}
.cb-search-page-mode button svg,
.cb-search-page-mode a svg { width: 12px; height: 12px; }
.cb-search-page-mode .cb-search-sparkle { width: 20px; height: 19px; }
.cb-search-page-mode button.active,
.cb-search-page-mode a.active {
  padding: 8px 18px 8px 12px;
  gap: 6px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(92, 83, 63, .08);
}
.cb-search-page-input { margin-bottom: .75rem; }

/* Search page: Ask AI hero (Figma node 1006:1674) — the pill tabs + search
   card + filters always render in this centered style; only the greeting
   headline and background glow appear/disappear based on whether a query
   has been asked, so switching states doesn't relayout the page. */
.cb-search-main:has(.cb-search-ai-hero--empty) { display: flex; }
.cb-search-main:has(.cb-search-ai-hero--empty) > form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cb-search-ai-hero { position: relative; width: 100%; max-width: 797px; margin: 0 auto; text-align: center; }
.cb-search-ai-hero .cb-search-page-mode { position: relative; z-index: 1; margin: 0 auto 1.5rem; width: fit-content; }
.cb-search-ai-hero-title {
  position: relative;
  z-index: 1;
  margin: 0 0 2rem;
  font-family: var(--cb-font-sans);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -.5px;
  color: var(--cb-text);
}
.cb-search-ai-hero .cb-judgment-hero-card-wrap { position: relative; z-index: 1; }
.cb-search-chips-center { position: relative; z-index: 1; justify-content: center; margin-top: .9rem; }
.cb-search-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cb-search-filter-label { margin-right: .15rem; color: var(--cb-text-muted); font-size: .72rem; font-weight: 600; }
.cb-search-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 32px;
  padding: 0 .8rem;
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  background: var(--cb-surface);
  color: var(--cb-text);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.cb-search-chips .cb-search-select-trigger {
  width: auto;
  min-height: 32px;
  max-width: 220px;
  padding: 0 .8rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
}
.cb-search-chips .cb-search-select-menu { width: max-content; min-width: 200px; }
.cb-search-chip.selected { border-color: var(--cb-brown); box-shadow: 0 0 0 1px var(--cb-brown); }
.cb-search-chip-check input { margin: 0; }
.cb-search-chip-apply { background: var(--cb-brown); border-color: var(--cb-brown); color: #fff; }
.cb-search-chip:disabled { opacity: .5; cursor: not-allowed; }
.cb-search-chip-menu { position: relative; }
.cb-search-chip-menu summary::-webkit-details-marker { display: none; }
.cb-search-chip-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1050;
  min-width: 200px;
  padding: .7rem .8rem;
  display: grid;
  gap: .4rem;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  background: var(--cb-surface);
  box-shadow: var(--cb-shadow);
}
.cb-search-custom-dates { display: inline-flex; gap: .35rem; margin: 0; }
.cb-search-page-body { max-width: 797px; margin: 1.1rem auto 0; }

/* Search page: recent chats side panel (Figma node 993:4649) */
.cb-search-layout { display: flex; align-items: stretch; margin: -1rem -24px; min-height: calc(100vh - 60px); }
.cb-search-main { flex: 1 1 auto; min-width: 0; padding: 1rem 24px; }
.cb-search-chats-panel {
  display: flex;
  flex: 0 0 236px;
  flex-direction: column;
  gap: 12px;
  width: 236px;
  padding: 16px;
  background: #fbfbfa;
  border-right: 1px solid #e5e5e5;
}
.cb-search-chats-panel.cb-collapsed { flex-basis: auto; width: auto; }
.cb-search-chats-panel.cb-collapsed .cb-search-chats-new,
.cb-search-chats-panel.cb-collapsed .cb-search-chats-list { display: none; }
.cb-search-chats-toprow { display: flex; align-items: flex-start; gap: 12px; width: 100%; }
.cb-search-chats-new {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 8px 12px 8px 10px;
  border: 1px solid #d4d4d4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  color: #404040;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.cb-search-chats-new:hover { border-color: #b8b8b8; color: #404040; }
.cb-search-chats-new-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 100px;
  background: #391e03;
  color: #fff;
}
.cb-search-chats-new-icon svg { width: 100%; height: 100%; }
.cb-search-chats-collapse {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid #d4d4d4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  color: #404040;
}
.cb-search-chats-collapse svg { width: 20px; height: 20px; }
.cb-search-chats-label {
  padding: 4px;
  color: #a3a3a3;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .055px;
  text-transform: uppercase;
}
.cb-search-chats-list { display: flex; flex-direction: column; width: 100%; }
.cb-search-chats-item {
  display: flex;
  /* Rows are two lines now (query, then who asked and when), so the icon sits
     against the first line rather than floating between them. */
  align-items: flex-start;
  gap: 8px;
  overflow: hidden;
  padding: 8px 12px;
  border-radius: 8px;
  color: #404040;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-search-chats-item:hover { background: rgba(0, 0, 0, .04); color: #404040; }
.cb-search-chats-item.active {
  border: 1px solid #d4d4d4;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  color: #404040;
  font-weight: 500;
}
.cb-search-chats-item.active:hover { background: #fff; }
/* Date buckets: the first sits under the "New" button, the rest need air. */
.cb-search-chats-label:not(:first-child) { margin-top: .75rem; }
.cb-search-chats-more {
  display: block;
  padding: 8px 12px;
  color: var(--cb-text-muted);
  font-size: 12px;
  text-decoration: underline;
}
.cb-search-chats-more:hover { color: var(--cb-text); }
.cb-search-chats-item-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.cb-search-chats-item-text { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.cb-search-chats-item-meta {
  overflow: hidden;
  min-width: 0;
  color: #a3a3a3;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-search-chats-item-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-top: 1px;  /* optical centring on the query line */
  width: 16px;
  height: 16px;
  color: var(--cb-text-muted);
}
.cb-search-chats-item-icon img { width: 16px; height: 16px; object-fit: contain; }
.cb-search-chats-item-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

@media (max-width: 991.98px) {
  .cb-search-layout { flex-direction: column; margin: -.75rem; }
  .cb-search-chats-panel { width: 100%; flex: 0 0 auto; border-right: 0; border-bottom: 1px solid #e5e5e5; }
  .cb-search-main { padding: .75rem; }
}
.cb-search-result-count { margin: 0 0 .7rem; color: var(--cb-text-muted); font-size: .8rem; }
.cb-search-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .9rem;
}
.cb-search-card {
  display: block;
  padding: .95rem 1rem;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  background: var(--cb-surface);
  color: var(--cb-text);
  text-decoration: none;
}
.cb-search-card:hover { border-color: #d4d1c9; box-shadow: var(--cb-shadow); }
.cb-search-card-title { margin: .5rem 0 .3rem; font-weight: 600; font-size: .92rem; }
/* Per-type detail line: assignees and due date, client and case number,
   filing date and note count. Items wrap, so they are spaced apart rather
   than separated by a character that would strand itself at a line start. */
.cb-search-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .85rem;
  margin-bottom: .35rem;
  font-size: .72rem;
  color: var(--cb-text-muted);
}
.cb-search-card-meta span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-search-card-excerpt {
  color: var(--cb-text-muted);
  font-size: .8rem;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.cb-search-card-excerpt mark { background: #ffec9e; padding: 0 1px; border-radius: 2px; }
.cb-search-answer-card {
  max-width: 760px;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  overflow: hidden;
}
.cb-ask-ai-panel { max-width: none; border-color: #ded4c9; box-shadow: 0 8px 28px rgba(57, 30, 3, .04); }
.cb-ask-ai-panel .cb-ask-ai-answer { padding: 1.25rem; }
.cb-ask-ai-empty { max-width: 760px; padding: 1.4rem .75rem; }
.cb-ask-ai-empty-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: .8rem;
  border-radius: 12px;
  background: #fce7ee;
  color: #c92c55;
  font-size: 1.2rem;
}
.cb-ask-ai-empty h2 { margin: 0 0 .35rem; font-family: var(--cb-font-display); font-size: 1.45rem; }
.cb-ask-ai-empty p { max-width: 620px; margin: 0; color: var(--cb-text-muted); font-size: .82rem; line-height: 1.5; }
.cb-ask-ai-suggestions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.cb-ask-ai-suggestions button {
  min-height: 34px;
  padding: .4rem .75rem;
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  background: var(--cb-surface);
  color: var(--cb-text);
  font-size: .75rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.cb-ask-ai-suggestions button:hover { border-color: #ad8b69; background: var(--cb-brown-100); }
.cb-ai-loading { display: flex; align-items: center; gap: .8rem; color: var(--cb-text); }
.cb-ai-loading strong, .cb-ai-loading span { display: block; }
.cb-ai-loading div > span { margin-top: .12rem; color: var(--cb-text-muted); font-size: .76rem; }
.cb-ai-loading-mark { color: #c92c55; font-size: 1.25rem; animation: cb-ai-pulse 1.1s ease-in-out infinite; }
.cb-ask-ai-question { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--cb-border-light); }
.cb-ask-ai-question span, .cb-ask-ai-question strong { display: block; }
.cb-ask-ai-question span { margin-bottom: .2rem; color: var(--cb-text-faint); font-size: .67rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.cb-ask-ai-question strong { font-size: .9rem; font-weight: 600; }
.cb-ask-ai-panel .cb-ask-ai-scope { color: var(--cb-brown-700); font-weight: 600; }
.cb-ask-ai-panel .cb-ask-ai-text { max-width: 900px; font-size: .9rem; line-height: 1.65; }
@keyframes cb-ai-pulse { 50% { transform: scale(1.2) rotate(12deg); opacity: .55; } }

@media (max-width: 767.98px) {
  .cb-search-page-heading { align-items: stretch; flex-direction: column; gap: .8rem; }
  .cb-search-page-mode { align-self: flex-start; }
  .cb-search-page-input .form-control,
  .cb-search-page.ai-mode .cb-search-page-input .form-control { padding-right: 6.5rem; font-size: .9rem; }
  .cb-search-filter-label { flex-basis: 100%; }
}
.cb-search-answer-card .cb-search-item { padding: .8rem .95rem; }
.cb-search-empty-text { color: var(--cb-text-muted); }
.cb-search-item {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .6rem .75rem;
  text-decoration: none;
  color: var(--cb-text);
  border-bottom: 1px solid var(--cb-border-light);
}
.cb-search-item:last-child { border-bottom: 0; }
.cb-search-item:hover { background: var(--cb-bg); }
.cb-search-type { flex-shrink: 0; font-size: .7rem; }
.cb-search-body { min-width: 0; }
.cb-search-title { font-weight: 500; font-size: .9rem; }
.cb-search-excerpt {
  font-size: .8rem;
  color: var(--cb-text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cb-search-excerpt mark { background: #ffec9e; padding: 0 1px; border-radius: 2px; }

/* ---- ChamberFlow ------------------------------------------------------- */
.cb-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(216px, 1fr));
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .75rem;
}
.cb-kanban.cb-dropzone-menu-open { overflow: visible; }
@media (max-width: 991.98px) {
  .cb-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; }
}
@media (max-width: 575.98px) {
  .cb-kanban { grid-template-columns: minmax(0, 1fr); }
}
.cb-kanban-column h3.h6 { font-size: 13px; font-weight: 500; }
.cb-kanban-column {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: .75rem;
  border-radius: 10px;
  background: #faf6ed;
  border: 1px solid var(--cb-border);
}
.cb-kanban-column--in_progress { background: #eef6fd; }
.cb-kanban-column--under_review { background: #f6f1fb; }
.cb-kanban-column--done { background: #f1f8ee; }
.cb-status-key {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  margin-right: .55rem;
  border-radius: .25rem;
  background: #f4c56d;
  vertical-align: -.05rem;
}
.cb-kanban-column--in_progress .cb-status-key { background: #8ec5f4; }
.cb-kanban-column--under_review .cb-status-key { background: #c8a6e8; }
.cb-kanban-column--done .cb-status-key { background: #a9d29b; }
.cb-column-add {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: .25rem .55rem;
  font-size: .72rem;
  line-height: 1;
  white-space: nowrap;
  border-radius: 7px;
}
.cb-kanban-column > .cb-kanban-dropzone {
  flex: 1 1 auto;
  align-content: start;
}
.cb-task-card {
  position: relative;
  display: block;
  padding: .75rem .85rem;
  cursor: pointer;
  border-radius: 10px;
  border: none;
  background: var(--cb-surface);
  box-shadow: var(--cb-shadow-sm);
}
.cb-task-card-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.cb-task-card-border rect {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  fill: none;
  stroke: #c8c6bf;
  stroke-width: 1px;
  stroke-dasharray: 3 3;
  stroke-linecap: round;
}
.cb-task-card[draggable="true"] > a:first-of-type { padding-right: 1.5rem; }
.cb-task-drag-handle {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 1;
  width: 24px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: .35rem;
  color: var(--cb-text-faint);
  cursor: grab;
  touch-action: none;
}
.cb-task-drag-handle:hover { background: var(--cb-bg); color: var(--cb-text-muted); }
.cb-task-drag-handle svg { width: 14px; height: 16px; fill: currentColor; }
.cb-task-status-select {
  width: auto;
  min-width: 8.5rem;
  max-width: 100%;
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: .78rem;
}
/* Compact status control on task cards: a pill-shaped chip that hugs its label
   with the chevron right beside it (no wide box / far-right chevron gap). */
[data-status-form] { width: fit-content; max-width: 100%; }
[data-status-form] .cb-search-select-picker {
  width: fit-content;
  max-width: 100%;
  font-size: .74rem;
}
[data-status-form] .cb-search-select-trigger {
  justify-content: flex-start;
  gap: .25rem;
  width: auto;
  min-height: 26px;
  padding: .15rem .55rem .15rem .5rem;
  border-radius: 999px;
  border-color: transparent;
  background: var(--cb-bg);
}
[data-status-form] .cb-search-select-trigger:hover {
  border-color: var(--cb-border);
  background: var(--cb-surface);
}
[data-status-form] .cb-search-select-value { flex: 0 1 auto; font-size: .72rem; }
[data-status-form] .cb-search-select-chevron svg { width: 12px; height: 12px; }
[data-status-form] .cb-search-select-menu { min-width: 9rem; }
[data-status-form] .cb-search-select-option {
  min-height: 1.75rem;
  padding: .25rem .4rem;
  font-size: .72rem;
}
.cb-search-select-menu--compact { padding: .3rem; }
.cb-task-dragging { opacity: .35; }
.cb-task-drag-ghost {
  position: fixed;
  z-index: 1100;
  margin: 0;
  pointer-events: none;
  opacity: .92;
  transform: rotate(1deg);
  box-shadow: var(--cb-shadow);
}
.cb-task-card:hover { box-shadow: var(--cb-shadow); }
.cb-task-card[draggable="true"] { cursor: grab; }
.cb-task-card[draggable="true"]:active { cursor: grabbing; }
.cb-task-overdue {
  background: var(--cb-surface);
}
.cb-task-overdue .cb-task-card-border rect { stroke: #fecaca; }
/* Overdue rows in the task list: a faint tint, not a shout — the red date carries the signal. */
.table-danger {
  --bs-table-bg: #fbf2f3;
  --bs-table-striped-bg: #fbf2f3;
  --bs-table-hover-bg: #f6e7e9;
  --bs-table-border-color: #f0dfe1;
}
.cb-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 1.5rem;
  max-width: 100%;
  padding: .28rem .55rem;
  border: 0;
  border-radius: 999px;
  color: var(--cb-text-muted);
  background: var(--cb-bg);
  font-size: .72rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-meta-pill svg {
  flex: 0 0 auto;
  width: .78rem;
  height: .78rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-task-assignee-icon { color: #404040; }
.cb-meta-pill .cb-priority-flag svg { width: 15px; height: 15px; }
.cb-meta-pill .cb-priority-flag svg path { stroke-width: 2.6; }
.cb-task-due-icon { color: #404040; }
.cb-task-assignee-icon circle,
.cb-task-assignee-icon path { stroke-width: 2.1; }
.cb-priority-dot { flex: 0 0 auto; width: .45rem; height: .45rem; border-radius: 50%; background: #d49b00; }
.cb-priority-dot--low { background: #7fa66b; }
.cb-priority-dot--high { background: #dc3545; }
.cb-task-reference-row {
  display: flex;
  align-items: center;
  gap: .2rem;
  min-width: 0;
  margin-bottom: .45rem;
  padding-right: 1.2rem;
}
.cb-task-reference {
  display: flex;
  gap: .12rem;
  min-width: 0;
  color: var(--cb-text-muted);
  font-size: .66rem;
  line-height: 1.2;
  text-decoration: none;
}
.cb-task-reference:hover { color: var(--cb-text); }
.cb-task-copy-link {
  display: inline-grid;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--cb-text-muted);
}
.cb-task-copy-link:hover,
.cb-task-copy-link:focus-visible { background: var(--cb-bg); color: var(--cb-text); outline: 0; }
.cb-task-copy-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cb-task-copy-link svg path { stroke-width: 2.2; }
.cb-task-meta { gap: .35rem; margin-top: .55rem; }
.cb-task-meta-primary { flex-wrap: wrap; gap: .35rem; }
.cb-task-meta-primary .cb-meta-pill { flex-shrink: 0; }
.cb-task-status-form { margin-top: .55rem; }
.cb-task-title { font-size: 1rem; font-weight: 600; line-height: 1.35; }
/* Real controls sit above the card-wide click target. */
.cb-task-card .cb-task-status-form,
.cb-task-card .cb-task-copy-link,
.cb-task-card .cb-task-reference { position: relative; z-index: 1; }
@media (max-width: 767.98px) {
  .cb-task-toolbar { flex-wrap: wrap; }
  .cb-task-search { flex: 1 1 100%; width: auto; }
  .cb-task-primary-filters {
    order: 2;
    flex: 0 1 auto;
    flex-wrap: wrap;
    margin-left: 0;
  }
  .cb-filter-menu { order: 2; margin-left: auto; }
  .cb-filter-live-list {
    order: 3;
    flex-basis: 100%;
  }
  .cb-task-filter-actions {
    order: 4;
    margin-left: auto;
  }
  .cb-filter-popover { grid-template-columns: 1fr; width: min(28rem, calc(100vw - 1.5rem)); }
  .cb-filter-nav { border-right: 0; border-bottom: 1px solid var(--cb-border); }
  .cb-filter-content { min-height: 16rem; }
}
.cb-quick-subtask {
  padding: .65rem;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  background: var(--cb-bg);
}
.cb-quick-subtask[hidden] { display: none; }
.cb-quick-subtask .form-control {
  flex: 1 1 16rem;
  width: auto;
  min-width: 0;
  background: var(--cb-surface);
}
@media (max-width: 575.98px) {
  .cb-quick-subtask .form-control { flex-basis: 100%; }
}
.cb-document-meta { line-height: 1.35; }
.cb-document-sidebar .cb-tag {
  padding: .15rem .48rem;
  font-size: .74rem;
}
.cb-document-sidebar dt { font-size: .82rem; }
.cb-document-sidebar dd { margin-bottom: .75rem; }
.cb-activity-feed { margin-bottom: .25rem; }
.cb-activity-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding-bottom: 1rem;
}
.cb-activity-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2rem;
  bottom: 0;
  left: .95rem;
  width: 1px;
  background: var(--cb-border);
}
.cb-activity-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 0 0 1.9rem;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--cb-parchment);
  color: var(--cb-text-muted);
}
.cb-activity-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-activity-icon--created { background: var(--cb-mint); color: var(--cb-mint-ink); }
.cb-activity-icon--file { background: var(--cb-blue); color: var(--cb-blue-ink); }
.cb-activity-icon--person { background: #f3e8ff; color: var(--cb-tag-purple); }
.cb-activity-icon--subtask { background: #e6fffb; color: var(--cb-tag-teal); }
.cb-activity-icon--changed { background: #fff7e6; color: var(--cb-tag-orange); }
.cb-activity-content { min-width: 0; padding-top: .05rem; }
.cb-activity-description { font-size: .88rem; line-height: 1.4; overflow-wrap: anywhere; }
.cb-activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .15rem;
  color: var(--cb-text-muted);
  font-size: .76rem;
}
.cb-kanban-dropzone {
  min-height: 7rem;
  max-height: 68vh;
  overflow-y: auto;
  border-radius: .75rem;
  transition: background-color .15s ease;
}
[data-status-form]:has(.cb-search-select-trigger[aria-expanded="true"]) { z-index: 3; }
.cb-drop-active { background: #eef2ff; }
.cb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-right: -.25rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #e0e7ff;
  color: #3730a3;
  font-size: .7rem;
  font-weight: 700;
}
.cb-profile-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 1.25rem;
  font-weight: 700;
}
.cb-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cb-header-search {
  position: relative;
  width: 100%;
  max-width: 530px;
  min-width: 0;
  justify-self: center;
}

.cb-header-search .form-control {
  height: 32px;
  min-height: 32px;
  padding-block: 0;
  border-radius: 10px;
  padding-inline: .8rem;
}

@media (max-width: 991.98px) {
  .cb-header-search {
    order: 3;
    max-width: none;
    justify-self: stretch;
  }
  #universal-search { min-width: 0; }
}

@media (max-width: 575.98px) {
  .cb-search-mode button { padding-inline: .5rem; }
}

@media (max-width: 991.98px) {
  .cb-app-shell { display: block; }
  .cb-sidebar {
    position: fixed;
    left: 0;
    width: min(240px, calc(100vw - 3rem));
    transform: translateX(-105%);
    box-shadow: var(--cb-shadow);
    transition: transform .2s ease;
  }
  .cb-sidebar-close { display: inline-grid; place-items: center; }
  .cb-sidebar-toggle { display: inline-grid; }
  .cb-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1030;
    display: block;
    visibility: hidden;
    padding: 0;
    border: 0;
    background: rgba(20, 18, 15, .36);
    opacity: 0;
    transition: opacity .2s ease, visibility .2s ease;
  }
  .cb-app-shell.sidebar-open .cb-sidebar { transform: translateX(0); }
  .cb-app-shell.sidebar-open .cb-sidebar-backdrop { visibility: visible; opacity: 1; }
  body.cb-sidebar-lock { overflow: hidden; }
}
.cb-search-empty { padding: .75rem; color: var(--cb-text-faint); font-size: .85rem; }

/* ---- 13. Misc utilities ----------------------------------------------- */
.cb-bg     { background: var(--cb-bg); }
.cb-divider { border-bottom: 1px solid var(--cb-border); }
.rounded-cb { border-radius: var(--cb-radius) !important; }

/* Workspace settings shell: compact product tabs, not Bootstrap's blue pills. */
.cb-settings-tabs {
  display: flex;
  gap: 1.25rem;
  margin: -.25rem 0 1rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--cb-border);
  scrollbar-width: none;
}
.cb-settings-tabs::-webkit-scrollbar { display: none; }
.cb-settings-tab {
  flex: 0 0 auto;
  padding: .55rem .1rem .5rem;
  border-bottom: 2px solid transparent;
  color: var(--cb-text-muted);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--cb-transition), border-color var(--cb-transition);
}
.cb-settings-tab:hover { color: var(--cb-text); }
.cb-settings-tab.active {
  border-bottom-color: var(--cb-brown);
  color: var(--cb-brown);
  font-weight: 600;
}
.cb-settings-panel {
  width: min(100%, 680px);
  padding: 1rem;
  margin-inline: auto;
  background: transparent;
  border: 0;
}
.cb-settings-panel-header {
  margin: -1rem -1rem 1rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--cb-border-light);
}
.cb-settings-panel-header h2 {
  font-size: 30px;
}
.cb-settings-panel-header p {
  font-size: 13px;
  max-width: 450px;
}
.cb-settings-panel .list-group-item,
.cb-notification-list .list-group-item {
  padding-top: 20px;
  padding-bottom: 20px;
}
.cb-page-section-header {
  padding-top: .85rem;
  padding-bottom: .85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--cb-border-light);
}
.cb-page-section-header h2 {
  font-size: 30px;
}
.cb-page-section-header p {
  font-size: 13px;
}
.cb-settings-page {
  width: min(100%, 680px);
  margin-inline: auto;
  padding-inline: 1rem;
}
.cb-settings-page .cb-surface {
  border-radius: 11px;
}
.cb-integration-title {
  font-size: 14px;
  font-weight: 500 !important;
}
.cb-integration-desc {
  font-size: 11.1px;
}
.cb-integration-card {
  padding-bottom: 52px;
}
.cb-settings-page .cb-dashboard-stat span {
  font-size: 12px;
  font-weight: 500;
}
.cb-dashboard-stat-action {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin-top: .6rem;
}
.cb-tag-sm {
  min-height: 22px;
  padding: .1rem .5rem;
  font-size: 10.8px;
  font-weight: 400;
}
.cb-tag-icon::before {
  display: none;
}
.cb-member-name {
  font-weight: 500 !important;
}
.cb-settings-readonly {
  padding: .85rem .9rem;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  background: var(--cb-surface-soft);
}
.cb-code-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-xs);
  background: var(--cb-surface);
}
.cb-code-display code {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cb-brown);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.cb-code-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-xs);
  background: var(--cb-surface);
  color: var(--cb-text-muted);
  cursor: pointer;
  transition: background-color var(--cb-transition), color var(--cb-transition);
}
.cb-code-copy svg { width: 14px; height: 14px; }
.cb-code-copy:hover { background: var(--cb-bg); color: var(--cb-text); }
@media (max-width: 575.98px) {
  .cb-settings-tabs { gap: 1rem; }
}

/* ---- 14. Authenticated app density ------------------------------------
   Keep the product compact without shrinking interactive controls below a
   comfortable mouse/tablet target. These rules intentionally live under the
   app shell so public, legal, and authentication pages retain their spacing. */
.cb-app-topbar {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(120px, 1fr) minmax(0, auto);
  align-items: center;
  height: 60px;
  padding: .45rem 24px !important;
  gap: .75rem !important;
  border-bottom-color: var(--cb-border-light);
}
.cb-topbar-left {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.cb-context-actions { justify-self: end; }
/* Pinned to the last column so the bell stays right even on pages that render
   no header search (grid auto-placement would otherwise drop it in column 2). */
.cb-global-actions {
  grid-column: 3;
  justify-self: end;
  margin-inline-start: auto;
}

@media (max-width: 991.98px) {
  .cb-app-topbar { display: flex; flex-wrap: wrap; height: auto; }
  .cb-context-actions { justify-self: unset; }
}

.cb-app-main { padding: 1rem 24px !important; }
.cb-app-main:has(> .cb-task-toolbar) { padding-top: 0 !important; }
.cb-app-main:has(> .cb-dashboard) { padding-left: 114px !important; padding-right: 114px !important; }

/* Full-bleed section divider: same colour as the topbar/context-nav hairline,
   extended past .cb-app-main's own side padding so it runs edge to edge. */
.cb-section-divider {
  margin-left: -24px;
  margin-right: -24px;
  margin-top: 30px;
  opacity: 1;
  border: 0;
  border-top: 1px solid var(--cb-border-light);
}
@media (max-width: 991.98px) {
  .cb-section-divider { margin-left: -.75rem; margin-right: -.75rem; }
}

.cb-app-main .cb-surface.p-4,
.cb-app-main .card-body { padding: 1rem !important; }

.cb-app-main .cb-surface.p-5 { padding: 1.5rem !important; }

.cb-app-main .row.g-4 {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.cb-app-main .g-3 {
  --bs-gutter-x: .75rem;
  --bs-gutter-y: .75rem;
}

.cb-app-main .cb-surface.mt-4 { margin-top: 1rem !important; }
.cb-app-main .mb-4 { margin-bottom: 1rem !important; }
.cb-app-main .mt-4 { margin-top: 1rem !important; }
.cb-app-main .py-3 { padding-top: .65rem !important; padding-bottom: .65rem !important; }

.cb-app-main .table > :not(caption) > * > * {
  padding: .55rem .65rem;
  vertical-align: middle;
}

.cb-app-main .list-group-item {
  transition: background-color .12s ease;
}
/* Without this, a row's open actions menu overlaps the row below it, but
   paints underneath it (later siblings stack on top at the same z-index),
   so the next row's border/content shows through the open menu. */
.cb-app-main .list-group-item:has(.dropdown-menu.show) { position: relative; z-index: 5; }
.cb-file-list .list-group-item { min-height: 60px; }
.cb-surface:has(.cb-file-list) { border-radius: 10px; }
.cb-app-main .list-group-item:hover {
  background-color: var(--cb-surface-soft) !important;
}
.cb-app-main .list-group-item.py-3 {
  padding-top: 16.4px !important;
  padding-bottom: 16.4px !important;
  padding-left: 2px !important;
  padding-right: 20px !important;
}
.cb-app-main .list-group-item h2.h6 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
}
.cb-judgment-facets .fw-semibold.small.mb-1 {
  font-size: 12.125px;
  font-weight: 500 !important;
}
.cb-judgment-facets { margin-top: 0; border-radius: 10px !important; }
.cb-results-col { padding-right: 20px; }
.cb-judgment-facets > h2.h6 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-transform: none;
}
.cb-results-list { border-radius: 0; }
.cb-results-list .list-group-item {
  background: transparent;
  border-width: 0 0 1px;
  border-radius: 0 !important;
}
.cb-results-list .list-group-item:last-child { border-bottom: 0; }

@media (max-width: 991.98px) {
  .cb-app-topbar { padding: .45rem .75rem !important; }
  .cb-context-nav { padding-inline: .75rem; }
  .cb-app-main { padding: .75rem !important; }
  .cb-app-main .cb-surface.p-4,
  .cb-app-main .card-body { padding: .85rem !important; }
}

@media (max-width: 575.98px) {
  .cb-header-brand { max-width: 9rem; }
  .cb-header-workspace-name { max-width: 6.25rem; }
  .cb-context-actions { width: 100%; }
}

/* ---- Judgment search landing hero --------------------------------------- */
/* Anchored at a fixed distance from the top instead of vertically centred,
   so the hero/search box stays put as the recent/saved searches list below
   it grows — centring the whole group made the search box drift upward
   as more rows were added. */
.cb-app-main:has(> .cb-judgment-hero) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3rem;
  padding-top: 112px !important;
  min-height: calc(100vh - 108px);
}
.cb-judgment-hero ~ *:not(.modal) {
  position: relative;
  z-index: 2;
}
.cb-judgment-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 797px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}
.cb-judgment-hero-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  color: var(--cb-text);
}
.cb-judgment-hero-icon svg { width: 32px; height: 32px; }
.cb-judgment-hero-title {
  position: relative;
  z-index: 1;
  margin: 0 0 9px;
  font-family: var(--cb-font-sans);
  font-size: 1.5rem;
  font-weight: 500 !important;
  color: var(--cb-text);
}
.cb-judgment-hero-sub { position: relative; z-index: 1; margin: 0 0 2rem; color: var(--cb-text-muted); font-size: 15.2px; }
.cb-judgment-hero-card-wrap { position: relative; width: 100%; }
.cb-judgment-hero-glow {
  position: absolute;
  width: 780px;
  max-width: 130%;
  height: 194px;
  border-radius: 100px;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.cb-judgment-hero-glow--peach { background: rgba(254, 248, 241, 1); left: 11px; top: -20px; }
.cb-judgment-hero-glow--blue { background: #edf7fe; left: 12px; top: -18px; opacity: .72; }
.cb-judgment-hero-card {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 10px 16px 10px 20px;
  background: #fdfdfc;
  border: 1px solid #d4d4d4;
  border-radius: 14px;
}
.cb-judgment-hero-inputrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0;
  color: var(--cb-text-faint);
}
.cb-judgment-hero-inputrow svg { width: 15px; height: 15px; flex-shrink: 0; fill: currentColor; }
.cb-judgment-hero-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -.14px;
  color: #404040;
}
.cb-judgment-hero-input:focus { outline: none; box-shadow: none; }
.cb-judgment-hero-input::placeholder { color: var(--cb-text-muted); }
.cb-judgment-hero-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: 1.875rem;
}
.cb-judgment-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px 8px 14px;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  background: #fff;
  color: #404040;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.cb-judgment-hero-chip svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; }
.cb-judgment-hero-chevron { width: 16px; height: 16px; color: #404040; }
.cb-judgment-hero-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  color: var(--cb-text);
}
.cb-judgment-hero-iconbtn svg { width: 20px; height: 20px; color: #404040; }
.cb-judgment-hero-submit-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: linear-gradient(140deg, hsl(205 95% 87%), hsl(30 96% 82%));
  box-shadow: 0 1.3px 2.6px rgba(0, 0, 0, .12);
}
.cb-judgment-hero-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #391e03;
  border-radius: 100px;
  background: #391e03;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.cb-judgment-hero-submit svg { width: 19px; height: 19px; flex-shrink: 0; transform: translateX(.8px); }
.cb-judgment-hero-submit svg g { transform: translate(-2.36px, .34px); }

/* ---- Judgment search: recent searches list ------------------------------ */
.cb-recent-searches {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 797px;
  padding: 0 41px 0 45px;
}
.cb-recent-searches-title {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -.15px;
  color: #737373;
}
.cb-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cb-recent-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cb-recent-row-left svg { width: 12px; height: 12px; flex-shrink: 0; color: #737373; }
.cb-recent-link {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -.14px;
  color: #2b6f8e;
  text-decoration: underline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-recent-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.cb-recent-meta {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -.14px;
  color: #737373;
  white-space: nowrap;
}
.cb-recent-dot { width: 4px; height: 4px; flex-shrink: 0; border-radius: 50%; background: #737373; }
.cb-recent-row-left svg.cb-recent-icon-bookmark { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; color: #737373; }
/* Full saved-searches list inside the "See all" modal: same row styling
   as the page, without the hero page's wide padding/max-width. */
.cb-saved-searches-modal-list { display: flex; flex-direction: column; gap: 14px; padding: 1rem 1.25rem; }
.cb-saved-delete-form { display: inline-flex; }
.cb-saved-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 0;
  background: transparent;
  color: #737373;
  cursor: pointer;
}
.cb-saved-delete svg { width: 12px; height: 12px; }
.cb-saved-delete:hover { color: #404040; }
.cb-searches-divider { width: 100%; max-width: 797px; margin: -12px 0; }
.cb-searches-divider::after { content: ""; display: block; height: 0; margin: 0 41px 0 45px; border-top: 1px solid var(--cb-border-light); }

/* ---- Judgment search: compact results-page search bar (44px tall) ------- */
.cb-judgment-searchbar-compact { padding: 4px 8px 4px 16px; border-radius: 12px; }
.cb-judgment-searchbar-compact .cb-judgment-hero-inputrow svg { width: 13px; height: 13px; }
.cb-judgment-searchbar-compact .cb-judgment-hero-input { font-size: 13px; line-height: 19px; }
.cb-judgment-searchbar-compact .cb-judgment-hero-submit-wrap { width: 32px; height: 32px; }
.cb-judgment-searchbar-compact .cb-judgment-hero-submit { width: 24px; height: 24px; }
.cb-judgment-searchbar-compact .cb-judgment-hero-submit svg { width: 15px; height: 15px; transform: translateX(.64px); }
.cb-judgment-searchbar-compact .cb-judgment-hero-submit svg g { transform: translate(-1.89px, .27px); }

/* ---- Real-time "your access changed" banner ---------------------------- */
.cb-access-banner {
  position: fixed;
  top: .75rem;
  left: 50%;
  z-index: 1090;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: calc(100vw - 2rem);
  padding: .5rem .5rem .5rem 1rem;
  transform: translateX(-50%);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  background: var(--cb-surface);
  box-shadow: var(--cb-shadow);
  color: var(--cb-text);
  font-size: .875rem;
}

/* Search-readiness dot beside a file name; gone once Search and Ask AI both hold it. */
.cb-index-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: .4rem;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}
.cb-index-dot--pending { background: #2f6fed; box-shadow: 0 0 0 3px rgba(47, 111, 237, .15); }
.cb-index-dot--unavailable { background: var(--cb-text-faint); }
.cb-index-dot--ready { display: none; }

/* ---- Document preview: pinned header + page controls --------------------
   The preview card used to scroll away with the document, taking Download and
   the page/zoom controls off screen. Both now stick to the top of the viewport
   while the pages scroll underneath. Sticky needs no clipping ancestor, so the
   card rounds its own children instead of using overflow:hidden. */
.cb-doc-preview-card { --cb-preview-head-h: 78px; }
.cb-doc-preview-head {
  position: sticky;
  top: var(--cb-nav-h, 60px);
  z-index: 3;
  background: var(--cb-surface);
  border-radius: var(--cb-radius) var(--cb-radius) 0 0;
}
.cb-doc-preview-body { border-radius: 0 0 var(--cb-radius) var(--cb-radius); }
.cb-doc-preview-body > #pdf-controls {
  position: sticky;
  /* ponytail: fixed header height — retune the var if the header gains a row. */
  top: calc(var(--cb-nav-h, 60px) + var(--cb-preview-head-h));
  z-index: 2;
  margin: -1rem -1rem 1rem !important;
  padding: .75rem 1rem;
  background: var(--cb-bg);
}
@media (min-width: 576px) {
  .cb-doc-preview-head { height: var(--cb-preview-head-h); }
}
@media (max-width: 575.98px) {
  /* Narrow screens wrap both bars onto several rows; pinning them would eat
     the viewport, so only the header stays put. */
  .cb-doc-preview-body > #pdf-controls { position: static; margin: 0 0 1rem !important; padding: 0; }
}