/* ==========================================================================
   Polish layer. Loads last, uses only the shared theme tokens (--sf-*, --bd-*, --tx-*, --ac-*), so every
   theme (default, dark, violet, light, pink) follows it.

   1. Form controls that are readable in every theme (native dropdown lists included)
   2. Composer: attachments strip, "More options" panel, co-author picker, media tiles
   3. Post menu (the "..." on an open post) and the report dialog
   4. Small shared touches (focus rings, motion)
   ========================================================================== */

/* ---- 1. Form controls ---------------------------------------------------- */
/* The control colours were hard-coded white in the base sheet, so on a light theme any field without its own override
   became white text on a white field. Text now follows the theme, and the browser is told which scheme the page uses so
   the native dropdown list (which the page cannot style directly) is drawn light or dark to match. */
body { color-scheme: dark; }
body[data-theme="light"], body[data-theme="pink"] { color-scheme: light; }
input, textarea, select { color: var(--tx-hi); }
input::placeholder, textarea::placeholder { color: var(--tx-faint); opacity: 1; }
select option, select optgroup { background-color: var(--sf-1); color: var(--tx-hi); }
select option:disabled { color: var(--tx-faint); }
input[type="search"]::-webkit-search-cancel-button { filter: none; opacity: .7; }
input:disabled, textarea:disabled, select:disabled { opacity: .6; cursor: not-allowed; }

/* ---- 2. Composer --------------------------------------------------------- */
/* Attachments strip: lives directly under the text box so a pasted or dropped file is always visible, even while
   "More options" is closed. */
.composer-attachments { display: grid; gap: 8px; margin: 10px 0 0; min-width: 0; }
.composer-attachments:not(.has-files) .upload-preview { display: none; }
.composer-attachments .upload-status:empty, .upload-status[hidden] { display: none; }
.upload-status { display: block; grid-column: auto; min-height: 0; font-size: 12.5px; font-weight: 600; color: var(--green); }
.upload-status-error { color: var(--ac-red); }
.upload-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 0; min-width: 0; }
.upload-preview-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; padding: 6px; border: 1px solid var(--bd-1); border-radius: 12px; background: var(--sf-1); }
.upload-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--sf-0); }
.upload-thumb img, .upload-thumb video { display: block; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; }
.upload-kind-video .upload-thumb::after { content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 7l9 5-9 5z'/%3E%3C/svg%3E") center / 20px no-repeat; pointer-events: none; }
.upload-kind-audio { grid-column: 1 / -1; }
.upload-kind-audio .upload-thumb { aspect-ratio: auto; padding: 10px; }
.upload-kind-audio audio { width: 100%; margin: 0; }
.upload-name { overflow: hidden; padding: 0 2px 2px; color: var(--tx-lo); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.upload-remove { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .66); color: #fff; cursor: pointer; }
.upload-remove:hover { background: #b3283f; }
.composer-attachments.just-added .upload-preview-item { animation: cw-pop .28s ease; }
@keyframes cw-pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.composer.upload-dropzone-active { outline: 2px dashed var(--ac-blue); outline-offset: 2px; }

/* "More options" fold */
.composer .composer-options { margin-top: 6px; border-top: 1px solid var(--bd-1); padding-top: 4px; }
.composer .composer-options > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; list-style: none; color: var(--tx-lo); font-size: 13.5px; font-weight: 600; cursor: pointer; border-radius: 8px; }
.composer .composer-options > summary::-webkit-details-marker { display: none; }
.composer .composer-options > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 3px 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; }
.composer .composer-options[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
.composer-options-label { display: inline-flex; align-items: center; gap: 8px; }
.composer-options-badge { flex: 1; min-width: 0; margin-left: auto; padding: 2px 10px; overflow: hidden; border-radius: 999px; background: var(--ov-2); color: var(--ac-blue); font-size: 12px; font-weight: 600; text-align: right; text-overflow: ellipsis; white-space: nowrap; max-width: max-content; }
.composer-options-badge[hidden] { display: none; }
.composer-panel { display: grid; margin-top: 6px; overflow: hidden; border: 1px solid var(--bd-1); border-radius: 14px; background: var(--sf-0); }
.cp-section { display: grid; gap: 10px; min-width: 0; padding: 14px 16px; border-bottom: 1px solid var(--bd-1); }
.cp-title { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--tx-lo); font: 700 11.5px/1.2 'DM Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.cp-title small { color: var(--tx-faint); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cp-help { margin: 0; color: var(--tx-faint); font-size: 12.5px; line-height: 1.5; }
.cp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cp-field { display: grid; gap: 6px; min-width: 0; color: var(--tx-lo); font-size: 12.5px; font-weight: 600; }
.cp-field-wide { grid-column: 1 / -1; }
.composer .cp-field :is(input, select) { width: 100%; max-width: none; min-height: 42px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 400; }
.composer .cp-field select { padding-right: 38px; }
.composer .cp-field input[type="datetime-local"] { color-scheme: inherit; }
.cp-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; background: var(--sf-1); }
.cp-footer .cp-help { flex: 1 1 220px; }
.composer .composer-draft { flex: none; }

/* Media button inside the panel: one full-width row that wraps cleanly at any width */
.composer-panel .upload-dropzone, .post-compose-reply-options .upload-dropzone { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 10px 14px; border: 1px dashed var(--bd-2); border-radius: 12px; background: var(--sf-1); color: var(--tx-lo); white-space: normal; cursor: pointer; transition: border-color .15s, background .15s; }
.post-compose-reply-options .upload-dropzone { width: auto; flex: 1 1 260px; }
.composer-panel .upload-dropzone:hover, .composer-panel .upload-dropzone-active, .post-compose-reply-options .upload-dropzone:hover { border-color: var(--ac-blue); background: var(--sf-2); }
.upload-dropzone-icon { flex: none; width: 36px; height: 36px; border: 1px solid var(--bd-2); background: var(--sf-2); color: var(--ac-blue); }
.upload-dropzone-copy { display: grid; min-width: 0; gap: 2px; }
.upload-dropzone-copy strong { color: var(--tx-hi); font-size: 14px; font-weight: 600; }
.upload-dropzone-copy small { color: var(--tx-faint); font-size: 12px; }
.composer-media-details { border: 1px solid var(--bd-1); border-radius: 12px; background: var(--sf-1); }
.composer-media-details[hidden] { display: none; }
.composer-media-details > summary { padding: 10px 14px; color: var(--tx-lo); font-size: 13px; font-weight: 600; cursor: pointer; }
.composer-media-details[open] > summary { border-bottom: 1px solid var(--bd-1); }
.composer-media-details .composer-media-meta { display: grid; gap: 10px; margin: 0; padding: 12px 14px; border: 0; background: transparent; }
.composer-media-details .composer-media-meta[hidden] { display: none; }
.composer-media-details .composer-media-meta + .composer-media-meta { border-top: 1px solid var(--bd-1); }
.composer-media-details legend { padding: 0 4px; color: var(--tx-faint); font-size: 12px; font-weight: 700; }
.composer-media-details label { display: grid; gap: 5px; color: var(--tx-lo); font-size: 12.5px; }

/* Co-author picker: chosen people on top, a search box, a short scrollable result list.
   The list is built from the people you follow plus a live search, so it never grows with your following count. */
.coauthor-picker { display: grid; gap: 8px; min-width: 0; max-width: none; padding: 0; border: 0; background: transparent; }
.composer-panel .coauthor-picker { background: transparent; border: 0; }
.ca-selected { display: flex; flex-wrap: wrap; gap: 6px; }
.ca-selected[hidden] { display: none; }
.ca-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 3px; border: 1px solid var(--bd-2); border-radius: 999px; background: var(--sf-2); color: var(--tx-hi); font-size: 13px; }
.ca-avatar { position: relative; display: grid; flex: none; place-items: center; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; background: var(--fill-blue); color: #fff; font-size: 11px; font-weight: 700; }
.ca-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.ca-chip-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-chip-remove { display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tx-lo); font-size: 17px; line-height: 1; cursor: pointer; }
.ca-chip-remove:hover { background: var(--ov-2); color: var(--tx-hi); }
.ca-search { position: relative; display: flex; align-items: center; }
.ca-search > svg { position: absolute; left: 13px; color: var(--tx-faint); pointer-events: none; }
.composer .ca-search input { width: 100%; max-width: none; min-height: 42px; padding: 9px 12px 9px 38px; border-radius: 10px; font-size: 14px; }
.ca-results { display: grid; gap: 2px; max-height: 232px; margin: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain; list-style: none; border: 1px solid var(--bd-1); border-radius: 12px; background: var(--sf-1); }
.ca-results[hidden] { display: none; }
.ca-group { padding: 8px 10px 4px; color: var(--tx-faint); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ca-empty { padding: 14px 12px; color: var(--tx-faint); font-size: 13px; line-height: 1.45; }
.ca-option { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 10px; border-radius: 9px; color: var(--tx-hi); cursor: pointer; }
.ca-option:hover, .ca-option.is-active { background: var(--ov-2); }
.ca-option-text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.ca-option-text strong { overflow: hidden; color: var(--tx-hi); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ca-option-text small { overflow: hidden; color: var(--tx-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ca-option-mark { flex: none; padding: 3px 10px; border: 1px solid var(--bd-2); border-radius: 999px; color: var(--ac-blue); font-size: 12px; font-weight: 600; }
.ca-option.is-picked .ca-option-mark { border-color: transparent; background: var(--ov-2); color: var(--green); }

@media (max-width: 520px) {
  .cp-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-section { padding: 12px; }
  .cp-footer { padding: 12px; }
  .upload-preview { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .composer-options-badge { display: none; }
}

/* ---- 3. Post menu and report dialog ------------------------------------- */
.post-view-head { position: relative; }
.post-menu { position: relative; flex: none; margin-left: auto; align-self: flex-start; }
.post-menu-button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--tx-lo); list-style: none; cursor: pointer; transition: background .15s, color .15s; }
.post-menu-button::-webkit-details-marker { display: none; }
.post-menu-button:hover, .post-menu[open] > .post-menu-button { background: var(--ov-2); color: var(--tx-hi); }
.post-menu-button:focus-visible { outline: 2px solid var(--ac-blue); outline-offset: 2px; }
/* Every row has the same fixed height and width, whatever it does - nothing expands inside the menu any more. */
.post-menu-list { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; display: grid; gap: 2px; width: 232px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid var(--bd-1); border-radius: 14px; background: var(--sf-1); box-shadow: 0 14px 36px rgba(0, 0, 0, .3); }
.post-menu-list form { display: block; margin: 0; }
.post-menu-item { display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; height: 42px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--tx-hi); font: inherit; font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.post-menu-item svg { flex: none; color: var(--tx-lo); }
.post-menu-item:hover, .post-menu-item:focus-visible { background: var(--ov-2); outline: none; }
.post-menu-item.is-danger, .post-menu-item.is-danger svg { color: var(--ac-red); }
.post-menu-item.is-danger:hover, .post-menu-item.is-danger:focus-visible { background: color-mix(in srgb, var(--ac-red) 12%, transparent); }

.report-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--bd-1); border-radius: 18px; background: var(--sf-1); color: var(--tx-hi); box-shadow: 0 24px 64px rgba(0, 0, 0, .45); }
.report-dialog::backdrop { background: rgba(6, 9, 20, .62); backdrop-filter: blur(2px); }
.report-dialog-form { display: grid; gap: 14px; padding: 20px; }
.report-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report-dialog-head h2 { margin: 0; font-size: 19px; letter-spacing: -.3px; }
.report-dialog-x { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tx-lo); cursor: pointer; }
.report-dialog-x:hover { background: var(--ov-2); color: var(--tx-hi); }
.report-dialog-help { margin: 0; color: var(--tx-faint); font-size: 13px; line-height: 1.5; }
.report-dialog .report-reason-field { display: grid; gap: 6px; color: var(--tx-lo); font-size: 13px; font-weight: 600; }
.report-dialog .report-reason-field select { width: 100%; min-height: 42px; padding: 9px 38px 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 400; }
.report-dialog .report-evidence-label { display: grid; gap: 6px; color: var(--tx-lo); font-size: 13px; font-weight: 600; }
.report-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---- 4. Small shared touches ------------------------------------------- */
:is(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--ac-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .composer-attachments.just-added .upload-preview-item { animation: none; }
  .composer .composer-options > summary::after, .post-menu-button { transition: none; }
}

/* Collapsed "More options" block on owner pages (e.g. community promotion) */
.settings-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; color: var(--tx-hi); font-size: 14px; }
.settings-more > summary::-webkit-details-marker { display: none; }
.settings-more > summary span { color: var(--tx-faint); font-size: 12.5px; }
.settings-more > summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--tx-lo); border-bottom: 2px solid var(--tx-lo); transform: rotate(45deg); transition: transform .18s ease; }
.settings-more[open] > summary { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--bd-1); }
.settings-more[open] > summary::after { transform: rotate(-135deg); }
.settings-more > summary span { margin-left: auto; }