/* Project Hub — checklist mission control */

/* Fills its column, like every other dashboard page.
 *
 * This used to be max-width: 1200px + margin: 0 auto. The TS-4125 epic
 * describes that as "matching other app pages at 1200px max", but no other
 * page does it: .dashaboard-content, .dashaboard-inner, .seo-tools-wrapper,
 * .column-box-full and .user-projects carry no width cap at all, and the only
 * max-width on a shared container is 1000px on .search-result-page .container,
 * which is a different page.
 *
 * So the Hub was the only page centring itself inside its column, which left a
 * gap between the left nav and the content that /projects, /seo-tools, /homerun
 * and the dashboard do not have. Reported as exactly that. TS-5527.
 *
 * The two-column layout inside (col-lg-8 / col-lg-4) simply widens with the
 * column now, which is what the Projects table beside it already does.
 */
.project-hub {
  width: 100%;
}

/* Header — uses standard Card component, minimal overrides */

/* Checklist sections */
.checklist-section .card-header {
  background: #f8f5fc;
  border-bottom: 1px solid #e8e0f0;
}
.checklist-section-icon {
  font-size: 1rem;
  color: var(--primary-color);
}
.checklist-section-title {
  font-weight: 600;
  color: var(--ts-color-ink, #3e2155);
}
.checklist-section--complete .card-header {
  background: #eaf7ef;
}
.checklist-section--complete .checklist-section-title {
  color: #2BC485;
}

/* Gated (finalised) section — subtle collapsed look */
.checklist-section--gated .card-header {
  background: #f0f7f2;
}
.checklist-section--gated .checklist-section-title {
  color: var(--ts-color-ink, #3e2155);
}

/* Checklist items */
.checklist-item {
  border-bottom: 1px solid #f0eff2;
  transition: background 0.15s ease;
  /* One height for every row, whether or not it carries a button.
     
     The row is py-2 (16px) plus whichever child is tallest, and those differ:
     .hub-action-btn is 0.8rem text with 5px/14px padding, about 31px, while a
     bare label is about 24px and .expand-toggle is a fixed 20px. So a row with
     Open Tool or Change stood about 47px and a plain one about 40px, and the
     list had no consistent beat. 48px is the tallest case rounded to the
     nearest step on the 4px scale, which is why it is a token rather than a
     measured literal. TS-5527. */
  min-height: var(--ts-space-7, 48px);
}

/* The trailing controls, as one right-aligned cluster.
   
   Each of the three optional controls used to carry its own ms-2 and sit
   directly in the row's flex, so whichever one a given row happened to have
   was the element landing at the right edge - a 20px circle on one row, a
   ~100px button on the next, with the expand toggle sitting BEFORE the button
   when a row had both. Grouping them puts the gaps under one owner and gives
   every row the same trailing block. */
.checklist-item__actions {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2, 8px);
  margin-left: var(--ts-space-2, 8px);
  flex-shrink: 0;
}
.checklist-item:last-child {
  border-bottom: none;
}
.checklist-item:hover {
  background: #faf8fd;
}
.checklist-item--checked {
  background: #fafafa;
}

.checklist-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Checked and focus states in brand, not bootstrap blue.
 *
 * accent-color: var(--primary-color) used to sit on the rule above and looked
 * like this was already handled. It never was: accent-color only tints a
 * NATIVE control, and .form-check-input sets appearance: none and paints the
 * box itself with background-color, so the accent had nothing to act on and
 * bootstrap's #0d6efd won. Removed rather than left, because a line that looks
 * like the fix and is not costs the next person the same hour.
 *
 * No !important needed: these match bootstrap's own specificity (0,2,0) and
 * project-hub.css loads after bootstrap.min.css, and nothing loaded later
 * (custom.css, custom-style.css, ts_react.css) declares this selector.
 *
 * The focus ring is bootstrap's geometry with the brand hue substituted;
 * there is no focus-ring token to reach for. TS-5527.
 */
.checklist-checkbox:checked {
  background-color: var(--ts-btn-primary-bg, #672c72);
  border-color: var(--ts-btn-primary-bg, #672c72);
}

.checklist-checkbox:focus {
  border-color: var(--ts-btn-primary-bg, #672c72);
  box-shadow: 0 0 0 0.25rem rgba(103, 44, 114, 0.25);
}

.checklist-label {
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--ts-color-ink, #3e2155);
}

/* Shared action button — consistent size across hub */
.hub-action-btn {
  font-size: 0.8rem;
  padding: 5px 14px;
  white-space: nowrap;
  border-radius: 6px;
}

.checklist-remove {
  font-size: 1.2rem;
  line-height: 1;
}

.checklist-add-btn {
  font-size: 0.85rem;
  text-decoration: none;
  /* Brand, because BOTH defaults here are bootstrap's #0d6efd: .btn-link sets
     it as its base colour, and the .text-primary this button used to carry set
     it again with !important. Dropping the utility is not enough on its own.
     Loads after bootstrap.min.css, so equal specificity resolves on order.
     Hover is left to .btn.btn-link:hover in ts_react.css, which is more
     specific and already uses the brand hover. TS-5514. */
  color: var(--ts-btn-primary-bg);
}
.checklist-add-btn:hover {
  text-decoration: underline;
}

/* Smart prompts */
.smart-prompt {
  background: #fef9e7;
  border: 1px solid #f5e6a3;
  border-radius: 8px;
  font-size: 0.9rem;
}
.smart-prompt-message {
  color: #5a4e00;
}
.smart-prompt-action {
  white-space: nowrap;
}

/* Progress ring */
.progress-ring {
  transform: rotate(0deg);
}

/* Inline +/- expand toggle */
.expand-toggle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  color: var(--primary-color);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--primary-color);
  flex-shrink: 0;
}
.expand-toggle:hover {
  background: var(--primary-color);
  color: #fff;
}

/* Expanded content below a checklist item */
.checklist-expand-content {
  border-bottom: 1px solid #f0eff2;
  padding: 4px 16px 10px 42px;
}

/* Outline entries */
.outline-entry {
  background: none;
  border: none;
  padding: 0 !important;
  margin-bottom: 6px !important;
}
.outline-title {
  color: var(--ts-color-ink, #3e2155);
  font-size: 0.85rem;
}
.outline-body {
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--ts-color-muted, #6b6880);
}
.outline-body ul {
  margin: 0.25rem 0 0;
  padding-left: 1.2rem;
}
.outline-body li {
  font-size: 0.85rem;
}

/* Thumbnail inline preview */
/* The header's small preview: same frame and fit as .sidebar-thumb. */
.thumbnail-preview {
  display: block;
  width: 160px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--ts-tint-page, #f2eef8);
  border-radius: var(--ts-radius-input, 8px);
}

/* ---- Intelligence panels ---- */

.project-intelligence .intel-card {
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(62, 33, 85, 0.08);
}
.project-intelligence .intel-card--subtle {
  background: #faf8fd;
  box-shadow: none;
  border: 1px solid #e8e0f0;
}

.intel-card-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--ts-color-ink, #3e2155);
}
.intel-card-heading--muted {
  color: var(--ts-color-muted, #6b6880);
  font-weight: 600;
}

.intel-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

.intel-hint {
  font-size: 0.85rem;
  color: var(--ts-color-ink, #3e2155);
  line-height: 1.5;
}

.intel-tag {
  font-size: 0.75rem;
  background: var(--ts-tint-page, #f2eef8);
  color: var(--primary-color);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.intel-score-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ts-color-ink, #3e2155);
}
.intel-score-verdict {
  font-size: 0.72rem;
  font-weight: 500;
}

.intel-reasoning {
  font-size: 0.88rem;
  color: var(--ts-color-ink, #3e2155);
  line-height: 1.55;
}

.intel-window {
  font-size: 0.8rem;
  color: var(--ts-color-muted, #6b6880);
}

.intel-ref-thumb {
  width: 100%;
  height: auto;
  border: 1px solid #e8e0f0;
  transition: transform 0.15s ease;
}
.intel-ref-thumb:hover {
  transform: scale(1.02);
}

/* ---- Project sidebar ---- */

.sidebar-card {
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(62, 33, 85, 0.08);
}

.sidebar-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--ts-color-ink, #3e2155);
}

/* The same frame the thumbnail listing page uses: a 16:9 box, the image
 * letterboxed inside it, never cropped.
 *
 * Copied in behaviour from .author-box.card-thumbnails .img-box in
 * custom-style.css, which is a padding-top: 56.25% ratio box with
 * background-color: var(--primary-light) and an inner img at
 * object-fit: contain. aspect-ratio expresses the same thing without the
 * padding-top hack; the tint and the contain are the parts that matter.
 *
 * Two wrong turns before this, both worth naming. object-fit: cover gave the
 * right frame and cropped people's heads off. Dropping the frame entirely
 * stopped the cropping but let a tall composite set the card's height and
 * push the Summary card down the sidebar. contain inside a fixed frame is
 * what the listing page settled on, and it solves both.
 *
 * The tint is what the letterbox bars show, so it is deliberate rather than
 * decoration - without it the bars are white on white. TS-5527.
 */
.sidebar-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--ts-tint-page, #f2eef8);
  border-radius: var(--ts-radius-input, 8px);
}

.sidebar-empty {
  font-size: 0.82rem;
  color: var(--ts-color-muted, #6b6880);
  font-style: italic;
}

.sidebar-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f0eff2;
  font-size: 0.84rem;
}
.sidebar-summary-item:last-child {
  border-bottom: none;
}
.sidebar-summary-icon {
  color: var(--primary-color);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-summary-label {
  color: var(--ts-color-muted, #6b6880);
  flex-shrink: 0;
}
.sidebar-summary-value {
  margin-left: auto;
  color: var(--ts-color-ink, #3e2155);
  font-weight: 500;
  text-align: right;
}
.sidebar-summary-empty {
  color: var(--ts-color-muted, #6b6880);
  font-weight: 400;
  font-style: italic;
}

.sidebar-body-snippet {
  font-size: 0.82rem;
  color: var(--ts-color-ink, #3e2155);
  line-height: 1.5;
  margin: 0;
}

.sidebar-alt-titles {
  font-size: 0.82rem;
  color: var(--ts-color-ink, #3e2155);
}
.sidebar-alt-titles ul {
  padding-left: 1.1rem;
  margin: 0;
}
.sidebar-alt-titles li {
  margin-bottom: 3px;
}

/* Asset picker modal */
.asset-picker-modal .list-group-item:focus {
  outline: 2px solid var(--primary-color);
}
.asset-picker-thumb {
  border: 2px solid transparent;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.asset-picker-thumb:hover {
  border-color: var(--primary-color);
  transform: scale(1.03);
}
.asset-picker-thumb--active {
  border-color: var(--primary-color) !important;
}