/* Empty recovery stays readable with long display names on narrow screens. */
#feed-state .empty-state, #profile-feed-status .empty-state { min-width:0; overflow-wrap:anywhere; }
#profile-feed-status .empty-actions .empty-action { max-width:100%; box-sizing:border-box; line-height:1.4; }
/* A tile's Report post button sits under the tile, not beside it. */
.profile-cell { flex-direction:column; align-items:flex-start; }
.profile-cell > .profile-tile { align-self:stretch; }
#profile-name-picker:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
/* Where the no-image-posts-anywhere panel sends a reader: the Paint-then-Social steps. */
#profile-create-steps:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
#feed-state .feed-status-summary h3 { margin:0; font:650 14px/1.4 system-ui,sans-serif; }
/* Visitor-written text wraps inside its card at any width (#2486): a 280-char
   unbroken body, a URL, a 60-char display name. `anywhere` rather than
   `break-word` because only it shrinks min-content, which is what lets a flex
   or grid child narrow instead of widening the page. Nothing here clips. */
#post-people,.post-body,.post-caption,.post-title,.post-name,.post-author,.post-people,.post-image-description,.post-media-fallback,.profile-media-fallback,.media-fallback-text,.profile-tile-caption,.profile-tile-description,.profile-active-filter,.profile-summary,.profile-identity-text h2,.feed-summary,.detail-caption,.detail-body,.detail-author-link,.detail-image-description,.detail-post-description,#profile-social-route a,.profile-filter-option,#post-name-filter { min-width:0; max-width:100%; overflow-wrap:anywhere; }
/* A native select sizes to its longest option; the cap above keeps it in its column. */
.social-toolbar .filter { min-width:min(150px,100%); }
/* A failed tile grows to hold its whole description instead of cropping it. */
.post-media[data-state="error"],.profile-media[data-state="error"] { overflow:visible; }

/* A People tile's image description and its missing-description note carry the
   captions role from .description-note in styles.css — ink-3, 11px, the
   monospace face, exactly as the feed and the permalink draw the same sentence.
   The only thing they need that the shared class cannot give them is this tile's
   own horizontal padding: a tile's image is full-bleed and its caption, meta row
   and action all inset by 14px, so without this the one line of text in the tile
   would start at the border. Padding only — no second type size, no second hue.
   Here rather than in styles.css because this sheet is the one both Social
   surfaces already load and is outside the initial-payload size budget that
   styles.css is measured against. */
.profile-figure .description-note { padding:0 14px; }

/* One reading order on all three surfaces (#2814): posting metadata, the post's
   words, the image, its description as the figure's caption, then the actions.
   A People tile therefore opens on its date row and caption above the image, so
   the inset paddings swap ends, and the row wraps rather than clipping a stat.
   Every image is bounded by its frame and shown whole: the tile frames have a
   fixed aspect ratio, the permalink caps the height, and contain keeps a
   40x1200 or 1200x40 image legible instead of cropping it to a strip. */
.profile-tile-meta { flex-wrap:wrap; padding:14px 14px 0; }
.profile-tile-caption { padding:8px 14px 14px; }
.profile-tile-link-label { margin-top:10px; }
.post-image,.profile-image,.detail-image { max-width:100%; object-fit:contain; }
.detail-post > .detail-figure { margin-top:16px; }
.post-figure,.profile-figure,.detail-figure,.post-card,.profile-tile { min-width:0; }

/* The shared disclosure must accommodate long display names and keyboard focus. */
#post-report-panel { position:static; min-width:0; overflow-wrap:anywhere; }
#post-report-title:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }

/* The permalink's reporting explanation, drawn onto the loaded post by
   src/post-page.js. Keyed on the parent so the handle's pointer and the site's
   focus ring travel together, which is how every other disclosure on the site
   is styled. It lives here rather than in styles.css because this stylesheet is
   the one the Social surfaces already load and is not inside the initial-payload
   size budget that styles.css is measured against. */
.post-report-disclosure > summary { cursor:pointer; font-size:13px; font-weight:700; }
.post-report-disclosure > summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }

/* The shared post region holds keyboard focus while Retry is pending. */
#post-detail:focus-visible { outline:3px solid var(--focus-ring); outline-offset:6px; border-radius:8px; }
.detail-report-guidance { flex-basis:100%; margin:0; min-width:0; overflow-wrap:anywhere; }

/* Content precedes the People action; long names still fit narrow cards/exits. */
.post-card > .post-people { margin-top:10px; }
#post-people { min-width:0; max-width:100%; overflow-wrap:anywhere; }

/* Recovery text and its focus landing share the shipped status/button tokens. */
#feed-state .feed-status { min-width:0; overflow-wrap:anywhere; }
#feed-state .feed-status-action { max-width:100%; box-sizing:border-box; white-space:normal; }
#feed-state:focus-visible,#feed-summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }

/* People recovery uses the existing rejected-input palette (evolution.css).
   The site explicitly supports light color-scheme, including in a dark OS theme. */
#profile-feed-status {
  --state-error-ink:#6f2821;
  --state-error-line:#b4453a;
  --state-error-wash:#fdf4f3;
  min-width:0;
}
#profile-feed-status .feed-status-error {
  border:1px solid var(--state-error-line);
  border-left-width:5px;
  border-radius:9px;
  padding:12px;
  background:var(--state-error-wash);
  color:var(--state-error-ink);
  text-align:left;
}
#profile-feed-status .feed-status-error :is(.feed-status-label,.feed-status-value,.feed-status-detail) { color:inherit; }
#profile-feed-status .field-error-mark { order:-1; border:2px solid currentColor; border-radius:50%; width:24px; height:24px; text-align:center; }
#profile-feed-status .profile-retry { max-width:100%; min-height:44px; margin-bottom:12px; white-space:normal; overflow-wrap:anywhere; }
#profile-feed-status .profile-retry[aria-disabled="true"] { cursor:wait; }
/* Programmatic heading targets retain the shared focus indicator. */
#grid-title:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }

/* Preserve readable filter guidance while the native fieldset is disabled. */
#profile-name-picker { min-width:0; max-width:100%; }
#profile-name-picker[aria-disabled="true"] { opacity:1; }
/* Example is a static classification, not a dynamic collection state. */
.profile-tile .badge-example { background:transparent; color:inherit; border:1px solid currentColor; }