/**
 * Readable width governor — cap prose measure on wide monitors.
 * Default: readable. Opt out with html[data-bb-measure="wide"].
 *
 * Author: Dave Greenlaw
 */

:root {
  --bb-readable-max: 42rem; /* ~672px at 16px; scales with Comfort rem */
}

/* —— Prose column (reading, not data chrome) —— */
html:not([data-bb-measure="wide"]) .bb-readable,
html:not([data-bb-measure="wide"]) .note-editor,
html:not([data-bb-measure="wide"]) .pf-reader__body .pf-detail--reader,
html:not([data-bb-measure="wide"]) .pf-reader__body .pf-detail--reader .pf-detail-body,
html:not([data-bb-measure="wide"]) .pf-reader__body .pf-detail--reader .pf-detail-comment__body,
html:not([data-bb-measure="wide"]) .bb-blog-post-view__author,
html:not([data-bb-measure="wide"]) .bb-blog-post-view__meta,
html:not([data-bb-measure="wide"]) .bb-blog-post-view__title,
html:not([data-bb-measure="wide"]) .bb-blog-post-tags,
html:not([data-bb-measure="wide"]) .bb-blog-post-view__body,
html:not([data-bb-measure="wide"]) .bb-blog-comment__body,
html:not([data-bb-measure="wide"]) .bb-blog-comments,
html:not([data-bb-measure="wide"]) .bb-blog-post-engage,
html:not([data-bb-measure="wide"]) .dash-timeline-item.is-preview-maximized .dash-timeline-item__body.note-editor,
html:not([data-bb-measure="wide"]) .photo-album-node-view__desc,
html:not([data-bb-measure="wide"]) .photo-album-node-view__auto-caption {
  max-width: min(var(--bb-readable-max), 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

/* Media inside a measured column stays within the measure */
html:not([data-bb-measure="wide"]) .note-editor img,
html:not([data-bb-measure="wide"]) .note-editor video,
html:not([data-bb-measure="wide"]) .pf-detail-body img,
html:not([data-bb-measure="wide"]) .pf-detail-body video,
html:not([data-bb-measure="wide"]) .bb-blog-post-view__body img,
html:not([data-bb-measure="wide"]) .bb-blog-post-view__body video,
html:not([data-bb-measure="wide"]) .bb-blog-post-view__photo {
  max-width: 100%;
}

html:not([data-bb-measure="wide"]) .bb-blog-post-view__photo {
  margin-inline: auto;
}

/* —— Explicit exclusions: data / media chrome stay full-bleed —— */
html:not([data-bb-measure="wide"]) .photo-album-node-view__image-wrap,
html:not([data-bb-measure="wide"]) .photo-album-annotate-stage,
html:not([data-bb-measure="wide"]) .photo-album-node-view__img,
html:not([data-bb-measure="wide"]) .dashboard-sections-grid,
html:not([data-bb-measure="wide"]) .dash-team-grid,
html:not([data-bb-measure="wide"]) .team-board-columns,
html:not([data-bb-measure="wide"]) .archive-tree,
html:not([data-bb-measure="wide"]) .bb-inspect-help-card {
  max-width: none;
  margin-inline: unset;
}

/* Look-control measure toggle (compact text) */
.bb-look-btn--measure {
  min-width: 4.25rem;
  padding-inline: 0.45rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.bb-look-btn--measure .bb-look-btn__label {
  line-height: 1.1;
  white-space: nowrap;
}

.bb-look-btn--measure[aria-pressed="true"] {
  outline: 2px solid color-mix(in srgb, var(--accent, #2a4d8f) 55%, transparent);
  outline-offset: 1px;
}

/* Reader / blog chrome pills sharing the same toggle behavior */
.bb-measure-toggle.pill-btn {
  font-weight: 650;
}