.post-composer { flex-wrap: wrap; }
.composer-message { width: 100%; margin: 0; font-size: 12px; color: #657e88; }
.composer-message:empty, .composer-attachments:empty { display: none; }
.composer-attachments { width: 100%; display: flex; gap: 12px; flex-wrap: wrap; }
.composer-attachments figure { margin: 0; width: 110px; position: relative; }
.composer-attachments figure img { width: 110px; height: 80px; object-fit: cover; border-radius: 8px; }
.composer-attachments figure button { position: absolute; right: 0; top: 0; border-radius: 50%; border: 0; background: white; color: #344e58; cursor: pointer; }
.composer-attachments figcaption { color: #71858f; font-size: 11px; }
.composer-item { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.composer-item .item-slot, .item-choice .item-slot, .post-item .item-slot { width: 44px; height: 44px; flex: 0 0 44px; }
.item-picker { width: min(640px, 90vw); max-height: 85vh; border: 1px solid #d8e7ed; border-radius: 18px; padding: 24px; background: #f8fbfd; color: #24333a; }
.item-picker::backdrop { background: #19364455; }
.item-picker h2 { margin-top: 0; }
.item-picker > p { font-size: 13px; color: #6b818a; }
.item-picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 15px; }
.item-choice { display: flex; align-items: center; gap: 9px; border: 1px solid #d8e7ed; border-radius: 10px; background: white; color: inherit; padding: 8px; text-align: left; cursor: pointer; }
.item-choice:disabled { opacity: .4; }
.post-copy { white-space: normal; overflow-wrap: anywhere; }
.post-copy p { margin: 0 0 .65em; }
.post-copy blockquote { margin: .5em 0; border-left: 3px solid #6cb8c7; padding: 6px 12px; background: #edf7fa; }
.post-copy code { background: #eef3f6; border-radius: 4px; padding: 2px 4px; }
.post-copy a { color: #14899a; text-decoration: underline; }
.post-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; margin: 12px 0; }
.post-gallery img { width: 100%; height: auto; max-height: 440px; object-fit: contain; background: #edf4f7; border-radius: 10px; display: block; }
.post-item { border: 1px solid #dce9ef; border-radius: 12px; padding: 12px; margin: 8px 0; }
.equipment-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.ar-balance { min-width: 160px; padding: 0 0 8px 20px; border-left: 1px solid #dce9ef; }
.ar-total { display: block; font-size: 25px; line-height: 1.3; color: #287e94; margin: 6px 0; }
.ar-balance details { font-size: 12px; color: #487685; }
.ar-balance summary { cursor: pointer; }
.ar-balance p { margin: 8px 0; }
.ar-note { display: block; font-size: 10px; color: #738994; margin-top: 8px; }
@media (max-width: 600px) { .equipment-row { flex-direction: column; gap: 12px; } .ar-balance { border-left: 0; border-top: 1px solid #dce9ef; padding: 12px 0; width: 100%; } .post-composer.large > button[type="submit"] { font-size: 12px; padding: 10px; } }
/* Composer and container views use the same pale blue surfaces as the profile. */
.post-composer { position: relative; }
.rich-editor { min-width: 0; min-height: 44px; padding: 10px 0; outline: 0; color: var(--net-ink); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.rich-editor:empty::before { content: attr(data-placeholder); color: var(--net-muted); pointer-events: none; }
.rich-editor > :is(p, div) { margin: 0; }
.rich-editor :is(ul, ol) { margin: 0; padding-left: 22px; }
.rich-editor a { color: var(--net-accent-deep); text-decoration: underline; }
.rich-editor:focus-visible { border-radius: 6px; box-shadow: 0 2px 0 #20a3b333; }
.attach-host { position: relative; width: 44px; }
.attach-button { width: 44px; height: 44px; display: grid; place-items: center; background: #edf6fa; border: 0; border-radius: 10px; color: #648994; cursor: pointer; }
.attach-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.attach-button:hover, .attach-button[aria-expanded="true"] { background: #def0f6; color: #169aaa; }
.attachment-menu { position: absolute; top: 52px; left: 0; min-width: 200px; display: grid; padding: 6px; border: 1px solid #d9e8ee; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px #29485322; z-index: 30; }
.attachment-menu button { border: 0; border-radius: 7px; background: transparent; color: #315563; padding: 12px; text-align: left; cursor: pointer; font: inherit; font-size: 13px; }
.attachment-menu button:hover { background: #eef7fb; }
.selection-format { position: absolute; z-index: 35; display: flex; flex-wrap: wrap; max-width: min(460px, 100%); padding: 5px; gap: 2px; background: #fff; border: 1px solid #d6e7ed; border-radius: 10px; box-shadow: 0 8px 25px #29485322; }
.selection-format button { border: 0; padding: 7px 9px; border-radius: 6px; background: transparent; color: #365967; font: inherit; font-size: 11px; cursor: pointer; }
.selection-format button:hover, .selection-format button[aria-pressed="true"] { background: #e2f2f7; color: #0c8394; }
.selection-format [data-command="bold"] { font-weight: 750; }
.selection-format [data-command="italic"] { font-style: italic; }
.selection-format [data-command="underline"] { text-decoration: underline; }
.selection-format [data-command="strikeThrough"] { text-decoration: line-through; }
.attachment-menu[hidden], .selection-format[hidden] { display: none; }
.post-composer > :is(.composer-attachments, .composer-message) { grid-column: 2 / -1; }
.composer-attachments figure { width: min(240px, 100%); }
.composer-attachments figure img { width: 100%; height: auto; max-height: 220px; object-fit: contain; background: #f0f6fa; display: block; }
.composer-attachments figure button { right: 6px; top: 6px; width: 26px; height: 26px; box-shadow: 0 2px 8px #27435120; }
.composer-attachments figcaption { display: none; }
.post-item { display: flex; align-items: center; gap: 12px; }
.post-item strong { font-size: 13px; }
.post-item > span { color: #6d8691; font-size: 12px; white-space: nowrap; }
.container-open { margin-left: auto; border: 0; padding: 8px 10px; color: #188c9d; background: #edf7fa; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12px; }
:is(.composer-item, .item-choice, .post-item, .container-grid) .item-slot { min-height: 0; border: 1px solid #cce1eb; border-radius: 5px; background: #edf5fa; box-shadow: none; overflow: hidden; }
:is(.composer-item, .item-choice, .post-item, .container-grid) .item-slot :is(img, canvas) { position: absolute; width: 82%; height: 82%; }
:is(.composer-item, .item-choice, .post-item, .container-grid) .item-count { position: absolute; z-index: 2; bottom: 2px; right: 3px; font-size: 12px; line-height: 1; }
.item-picker, .container-dialog, .link-dialog { box-sizing: border-box; width: min(620px, calc(100vw - 32px)); max-height: 85dvh; overflow: auto; border: 1px solid #d6e7ef; padding: 22px; border-radius: 18px; background: #f7fbfd; color: #263c47; box-shadow: 0 20px 70px #152e4326; }
.item-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.item-dialog-header h2 { margin: 0; font: 750 20px/1.3 var(--display); }
.dialog-close { border: 0; border-radius: 50%; width: 32px; height: 32px; flex: 0 0 32px; padding: 0; display: grid; place-items: center; background: #e8f2f7; color: #648291; font-size: 24px; cursor: pointer; }
.container-dialog::backdrop, .link-dialog::backdrop { background: #19364455; }
.container-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.container-grid .item-slot { width: 100%; height: auto; aspect-ratio: 1; cursor: default; }
.container-grid .item-slot[role="button"] { cursor: pointer; }
.container-empty { text-align: center; font-size: 13px; color: #7a909b; margin: 16px 0 0; }
.mc-tooltip.container-tooltip { width: min(350px, calc(100vw - 28px)); max-width: none; border: 1px solid #cce1eb; background: #f7fbfd; border-radius: 12px; box-shadow: 0 8px 28px #213e4826; padding: 12px; font: 12px/1.4 var(--body, sans-serif); color: #2c4a58; gap: 10px; }
.mc-tooltip.container-tooltip strong { color: #2c4a58; font-weight: 700; }
.link-dialog { width: min(400px, calc(100vw - 32px)); }
.link-dialog input { display: block; box-sizing: border-box; width: 100%; border: 1px solid #cddfe8; border-radius: 8px; padding: 10px; margin-top: 10px; }
.link-dialog > div { display: flex; gap: 8px; justify-content: end; }
.link-dialog button { border: 0; border-radius: 8px; padding: 10px; background: #e7f3f7; color: #207f93; cursor: pointer; }
@media (max-width: 600px) { .item-picker, .container-dialog { padding: 14px; } .item-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .item-choice { font-size: 12px; min-width: 0; } .container-grid { gap: 2px; } .container-grid .item-count { font-size: 10px; } .post-item { gap: 8px; flex-wrap: wrap; } .post-composer > .composer-attachments { grid-column: 1 / -1; } .post-composer.large { gap: 9px; } }
.item-picker, .container-dialog, .link-dialog { margin: auto; }
:is(.composer-item, .item-choice, .post-item, .container-grid) .item-count { font-family: Arial, sans-serif; font-weight: 700; text-shadow: 1px 1px #314c5b, -1px 1px #314c5b, 1px -1px #314c5b, -1px -1px #314c5b; }

.item-slot:focus-visible { outline: 2px solid #358fad; outline-offset: 2px; }
.composer-item > button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #edf5f8; color: #527887; font: inherit; cursor: pointer; }
/* Idle composer keeps the player face; focus gives the space back to writing. */
.post-composer { grid-template-columns: 44px minmax(0, 1fr) auto; }
.attach-host > .mini-avatar { width: 44px; height: 44px; cursor: text; transition: opacity .18s, transform .22s; }
.attach-host > .attach-button { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: rotate(-20deg) scale(.8); transition: opacity .18s, transform .22s, background .18s; }
.is-editing .attach-host > .mini-avatar { opacity: 0; transform: scale(.8); pointer-events: none; }
.is-editing .attach-host > .attach-button { opacity: 1; visibility: visible; transform: none; }
.post-composer .composer-submit { box-sizing: border-box; width: 132px; height: 44px; min-width: 0; padding: 0; border-radius: 12px; display: flex; justify-content: center; align-items: center; overflow: hidden; transition: width .24s cubic-bezier(.2,.8,.2,1), background .2s; color: white; }
.composer-submit .submit-label { white-space: nowrap; font-size: 12px; transition: opacity .15s; }
.composer-submit > svg { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.is-editing .composer-submit { width: 44px; }
.is-editing .composer-submit .submit-label { display: none; }
.is-editing .composer-submit > svg { display: block; }
.is-sending .composer-submit > svg { animation: send-plane .65s ease-in-out infinite; }
@keyframes send-plane { 50% { transform: translate(5px, -5px); opacity: .4; } }
.post-card { overflow: hidden; }
.picker-hint, .picker-status { color: #708893; font-size: 12px; line-height: 1.5; }
.picker-status { min-height: 18px; margin: 10px 0; }
.picker-item { min-width: 0; border: 1px solid #d8e7ed; border-radius: 11px; background: white; overflow: hidden; transition: border-color .16s, background .16s; }
.picker-item .item-choice { width: 100%; height: 100%; min-height: 65px; border: 0; border-radius: 0; background: transparent; position: relative; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.picker-item.is-selected { border-color: #38a5b7; background: #eef9fc; }
.picker-item.is-selected .item-choice { height: auto; }
.picker-check { display: none; position: absolute; right: 5px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #159faf; color: #fff; font-size: 10px; text-align: center; }
.is-selected .picker-check { display: block; }
.picker-quantity { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 0 8px 10px; font-size: 11px; color: #587786; }
.picker-quantity[hidden] { display: none; }
.picker-quantity input { width: 55px; min-width: 0; padding: 5px; border: 1px solid #c5dfe8; border-radius: 6px; font: inherit; color: #244d60; background: #fff; }
.picker-quantity input[aria-invalid="true"] { border-color: #bd6170; }
.picker-footer { position: sticky; bottom: -22px; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 0 0; border-top: 1px solid #dbe9ef; background: #f7fbfd; }
.picker-footer button { border: 0; border-radius: 10px; padding: 11px 14px; cursor: pointer; font: inherit; font-size: 12px; }
.picker-mode { background: #eaf3f7; color: #487382; }
.picker-confirm { background: #179ead; color: #fff; }
.photo-carousel { margin: 16px 0; border-radius: 14px; overflow: hidden; background: #f0f6fa; }
.photo-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.photo-track::-webkit-scrollbar { display: none; }
.photo-slide { flex: 0 0 100%; min-width: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in; scroll-snap-align: start; }
.photo-slide img { display: block; width: 100%; height: 360px; max-height: 55vh; object-fit: contain; }
.photo-controls { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 9px 14px; }
.photo-controls[hidden] { display: none; }
.photo-controls > button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: white; color: #428597; font-size: 23px; cursor: pointer; }
.photo-controls > button:disabled { opacity: .35; cursor: default; }
.photo-controls > span { color: #708994; font-size: 11px; font-variant-numeric: tabular-nums; }
.photo-dots { display: flex; align-items: center; gap: 6px; }
.photo-dots button { padding: 0; width: 7px; height: 7px; border: 0; border-radius: 8px; background: #cadfe7; cursor: pointer; transition: width .2s, background .2s; }
.photo-dots button[aria-current="true"] { width: 20px; background: #1aa1b0; }
.image-viewer { position: fixed; inset: 0; margin: auto; box-sizing: border-box; width: calc(100vw - 40px); max-width: 1400px; height: calc(100dvh - 40px); max-height: none; border: 1px solid #d8e9f033; border-radius: 20px; background: #152b36f5; padding: 50px 60px 80px; overflow: hidden; color: #edf8fd; box-shadow: 0 30px 100px #10263166; }
.image-viewer[open] { display: flex; align-items: center; justify-content: center; animation: viewer-enter .2s ease-out; }
.image-viewer::backdrop { background: #142a3bcc; backdrop-filter: blur(8px); }
.viewer-stage { width: 100%; height: 100%; display: grid; place-items: center; touch-action: pan-y pinch-zoom; }
.viewer-image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; min-height: 0; }
.image-viewer button { border: 0; cursor: pointer; color: inherit; }
.viewer-close, .viewer-prev, .viewer-next { position: absolute; width: 38px; height: 38px; border-radius: 50%; background: #ffffff18; font-size: 29px; display: grid; place-items: center; }
.viewer-close { top: 12px; right: 14px; }
.viewer-prev { left: 12px; top: calc(50% - 20px); }
.viewer-next { right: 12px; top: calc(50% - 20px); }
.viewer-count { position: absolute; top: 22px; left: 24px; font-size: 13px; }
.viewer-thumbnails { position: absolute; bottom: 15px; left: 10%; right: 10%; display: flex; justify-content: center; gap: 8px; }
.viewer-thumbnails button { padding: 3px; width: 52px; height: 46px; border-radius: 8px; background: transparent; opacity: .55; }
.viewer-thumbnails button[aria-pressed="true"] { opacity: 1; background: #5bc4d8; }
.viewer-thumbnails img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.image-viewer [hidden] { display: none; }
@keyframes viewer-enter { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .post-composer.large { grid-template-columns: 44px minmax(0,1fr) auto; }
  .post-composer .composer-submit { width: 100px; grid-column: auto; padding: 0; }
  .is-editing.post-composer .composer-submit { width: 40px; }
  .composer-submit .submit-label { font-size: 10px; }
  .picker-footer { bottom: -14px; }
  .picker-footer button { padding: 10px; font-size: 11px; }
  .photo-slide img { height: 260px; }
  .image-viewer { width: 100vw; height: 100dvh; border-radius: 0; padding: 65px 12px 90px; }
  .viewer-prev, .viewer-next { top: auto; bottom: 25px; z-index: 2; }
  .viewer-thumbnails { left: 50px; right: 50px; bottom: 20px; gap: 3px; }
  .viewer-thumbnails button { width: 38px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .post-composer *, .photo-carousel *, .image-viewer[open] { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.post-composer.large .composer-submit { grid-column: 3; grid-row: 1; justify-self: end; }
.attach-button[aria-expanded="true"] svg { transform: rotate(-12deg); transition: transform .2s; }
.attach-button svg { transition: transform .2s; }
/* Post version of the login wheel: the next and previous photos stay in view. */
.photo-wheel { background: transparent; border: 1px solid #dce9ef; border-radius: 16px; padding: 8px 0 0; }
.photo-wheel .photo-track { --photo-width: 82%; --photo-gap: 12px; position: relative; gap: var(--photo-gap); padding: 12px 0 24px; scroll-snap-type: x mandatory; touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; cursor: grab; mask-image: linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent); }
.photo-wheel .photo-track::before, .photo-wheel .photo-track::after { content: ''; flex: 0 0 max(0px, calc((100% - var(--photo-width))/2 - var(--photo-gap))); }
.photo-wheel .photo-slide { flex: 0 0 var(--photo-width); min-width: 0; border: 1px solid #dae8ef; border-radius: 13px; overflow: hidden; background: #edf5f9; scroll-snap-align: center; scroll-snap-stop: always; opacity: .45; transform: translateY(7px) scale(.94); transition: transform .35s cubic-bezier(.2,.75,.2,1),opacity .25s,box-shadow .3s; cursor: pointer; }
.photo-wheel .photo-slide.is-active { opacity: 1; transform: none; border-color: #badbe6; box-shadow: 0 15px 24px -17px #28556780; cursor: zoom-in; }
.photo-wheel .photo-slide img { height: clamp(210px, 28vw, 400px); max-height: 52vh; width: 100%; object-fit: contain; pointer-events: none; }
.photo-wheel .photo-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.photo-wheel .photo-track.is-dragging .photo-slide { cursor: grabbing; transition-duration: .1s; }
.photo-wheel .photo-controls { position: relative; justify-content: space-between; padding: 0 14px 12px; gap: 8px; background: transparent; }
.photo-wheel .photo-controls > button { width: auto; height: 36px; padding: 0 13px; font: 650 11px/1 var(--body,sans-serif); background: #edf4f8; border: 1px solid #e0e9ef; border-radius: 10px; color: #527581; }
.photo-wheel .photo-controls > button:hover { background: #e0f0f5; color: #167f93; }
.photo-wheel .photo-dots { position: absolute; left: 50%; transform: translateX(-50%); }
.photo-wheel .photo-position { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.photo-wheel.is-single { padding: 0; border: 0; }
.photo-wheel.is-single .photo-track { --photo-width: 100%; padding: 0; mask-image: none; }
.photo-wheel.is-single .photo-track::before,.photo-wheel.is-single .photo-track::after { display: none; }
.photo-wheel.is-single .photo-slide { border-radius: 12px; box-shadow: none; }
@media (max-width:600px) {
 .photo-wheel .photo-track { --photo-width: 80%; --photo-gap: 8px; mask-image: linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent); padding-bottom: 18px; }
 .photo-wheel .photo-slide img { height: 225px; }
 .photo-wheel .photo-controls { padding: 0 8px 10px; }
 .photo-wheel .photo-controls > button { padding: 0 8px; height: 32px; font-size: 10px; }
 .photo-wheel .photo-dots { gap: 4px; }
 .photo-wheel .photo-dots button { width: 5px; }
 .photo-wheel .photo-dots button[aria-current=true] { width: 14px; }
}
.photo-wheel .photo-slide.is-active.is-tilting { transition: transform .12s ease-out, opacity .25s, box-shadow .3s; }
@media (prefers-reduced-motion: reduce) { .photo-wheel .photo-slide { transform: none; } }
/* Reactions, author actions and full comment threads. */
.post-card { position: relative; overflow: visible; }
.post-card.menu-open { z-index: 8; }
.post-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.post-header .post-author { min-width: 0; }
.post-header .post-author strong { overflow-wrap: anywhere; }
.post-menu-host { position: relative; flex: 0 0 auto; }
.post-more { width: 36px; height: 36px; border: 0; border-radius: 12px; background: #edf5f8; color: #527580; font: 700 25px/1 sans-serif; cursor: pointer; }
.post-more:hover,.post-more[aria-expanded=true] { background: #dceef3; color: #138495; }
.post-menu { position: absolute; top: 43px; right: 0; z-index: 12; min-width: 190px; padding: 6px; border: 1px solid #dce8ee; border-radius: 14px; background: #fff; box-shadow: 0 12px 36px #244f6424; }
.post-menu[hidden],.post-thread[hidden],.thread-empty[hidden],.older-comments[hidden] { display: none; }
.post-menu button { display: block; width: 100%; padding: 12px; border: 0; border-radius: 9px; background: transparent; color: #395763; text-align: left; font: 600 13px/1.3 var(--body,sans-serif); cursor: pointer; }
.post-menu button:hover,.post-menu button:focus-visible { background: #edf6f9; }
.post-menu button.is-danger { color: #c14d64; }
.post-pinned { margin: 0 0 12px; color: #178596; font-size: 11px; font-weight: 700; }
.post-actions { margin: 16px 0 0 51px; gap: 10px; flex-wrap: wrap; }
.post-actions button { min-height: 40px; padding: 9px 12px; gap: 8px; border: 1px solid #dce9ef; border-radius: 12px; color: #50717f; background: #f0f6f9; font-size: 12px; transition: background .18s,border-color .18s,transform .18s; }
.post-actions button:hover { background: #e3f1f6; border-color: #bedde6; transform: translateY(-1px); }
.post-actions svg { width: 20px; height: 20px; flex: 0 0 auto; stroke-width: 1.8; }
.post-actions .action-count { min-width: 20px; padding: 2px 5px; border-radius: 6px; background: #fff9; text-align: center; font-variant-numeric: tabular-nums; }
.post-actions .post-like.is-active { color: #c44c72; background: #fff0f5; border-color: #f0cad7; }
.post-like.is-active svg { fill: currentColor; }
.post-comments-button[aria-expanded=true] { color: #147f91; background: #e1f2f6; border-color: #afd9e4; }
.post-more:focus-visible,.post-actions button:focus-visible,.post-hidden button:focus-visible { outline: 2px solid #329caf; outline-offset: 3px; }
.post-thread { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e1ebf0; min-width: 0; }
.comment-list { display: grid; gap: 14px; }
.feed-list .comment-card,.comment-card { padding: 12px; border: 1px solid #e0ebf0; border-radius: 14px; background: #f9fcfd; min-width: 0; }
.comment-card .post-author .person-avatar { width: 32px; height: 32px; }
.comment-card .post-copy { margin-left: 43px; }
.comment-card .post-actions { margin-left: 43px; margin-top: 10px; }
.comment-card .post-actions button { min-height: 34px; padding: 6px 10px; }
.comment-card .post-header { margin-bottom: 6px; }
.comment-composer.post-composer { margin: 14px 0 0; padding: 14px; border: 1px solid #d4e7ef; border-radius: 14px; background: #fff; box-shadow: none; }
.thread-empty,.thread-status { padding: 12px 0; color: #80949e; font-size: 12px; }
.older-comments { margin: 0 0 14px; padding: 10px 12px; border: 0; border-radius: 10px; background: #eaf4f8; color: #287d8f; cursor: pointer; }
.post-hidden { display: flex; justify-content: space-between; align-items: center; padding: 18px; border: 1px dashed #cbdfe8; border-radius: 14px; color: #708b97; font-size: 13px; }
.post-hidden button { border: 0; background: #e6f2f6; color: #168496; border-radius: 9px; padding: 9px 12px; cursor: pointer; }
.report-dialog { margin: auto; width: min(440px,calc(100vw - 28px)); padding: 24px; border: 1px solid #d2e5ee; border-radius: 20px; color: #304c58; background: #fafdff; box-shadow: 0 24px 80px #12374733; }
.report-dialog::backdrop { background: #173a4d66; backdrop-filter: blur(5px); }
.report-dialog form { display: grid; gap: 14px; }
.report-dialog label { display: grid; gap: 8px; font-size: 13px; }
.report-dialog select,.report-dialog textarea { box-sizing: border-box; width: 100%; padding: 12px; border: 1px solid #cfe2ec; border-radius: 11px; font: inherit; color: inherit; background: white; }
.report-dialog textarea { resize: vertical; }
.report-status { color: #bb4860; font-size: 12px; }
@media(max-width:600px) {
 .post-actions,.comment-card .post-actions { margin-left: 0; gap: 7px; }
 .post-actions button { padding: 8px 10px; font-size: 11px; }
 .comment-card .post-copy { margin-left: 0; }
 .comment-composer.post-composer { padding: 10px; gap: 8px; }
 .comment-card .photo-wheel .photo-slide img { height: 180px; }
}
@media(prefers-reduced-motion:reduce) { .post-actions button { transition: none; transform: none; } }
.report-dialog .picker-confirm { min-height: 44px; padding: 12px 18px; border: 0; border-radius: 12px; color: white; background: #199dac; font: 650 13px/1.2 var(--body,sans-serif); cursor: pointer; }
.report-dialog .picker-confirm:hover { background: #138394; }
.report-dialog .picker-confirm:disabled { opacity: .55; cursor: wait; }
@media(min-width:601px) and (max-width:1000px) { .post-actions { margin-left: 0; } }
/* Social surfaces share the existing pale blue site palette. */
.social-utilities { display:flex; justify-content:flex-end; gap:16px; margin: 0 2px 12px; }
.social-utilities button { border:0; padding:6px 0; color:#67818d; background:none; font:600 11px/1.3 var(--body,sans-serif); cursor:pointer; }
.social-utilities button:hover { color:#148a9b; }
.social-dialog { box-sizing:border-box; margin:auto; padding:24px; width:min(620px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); overflow-y:auto; border:1px solid #d5e5ed; border-radius:20px; background:#fbfdfe; color:#304c58; box-shadow:0 24px 80px #173d5633; }
.social-dialog::backdrop { background:#173a4d66; backdrop-filter:blur(5px); }
.social-dialog .item-dialog-header h2 { font-size:22px; }
.social-library { display:grid; gap:16px; }
.library-row { padding:16px; border:1px solid #dbe8ee; border-radius:14px; background:#fff; }
.library-row > strong { display:block; }
.library-row .post-copy { margin:12px 0; max-height:220px; overflow:auto; }
.library-note { font-size:12px; color:#6f8996; }
.library-row textarea { box-sizing:border-box; display:block; width:100%; border:1px solid #cfdfe8; border-radius:10px; padding:10px; margin:12px 0; font:inherit; }
.social-primary,.load-more-posts { border:1px solid #cce3ed; border-radius:11px; padding:11px 16px; background:#eaf5f9; color:#147e91; font:600 12px/1.3 var(--body,sans-serif); cursor:pointer; }
.library-row .social-primary { margin:6px 8px 0 0; }
.load-more-posts { width:100%; margin:14px 0; }
.social-primary:hover,.load-more-posts:hover { background:#dceff5; }
.social-primary:disabled,.load-more-posts:disabled { opacity:.55; cursor:wait; }
.feed-list .comment-card,.comment-card { background:transparent; border:0; border-radius:0; padding:12px 0; }
.comment-list { gap:4px; }
.comment-card+.comment-card { border-top:1px solid #e8eff3; }
.comment-card .post-attachments { margin-left:43px; }
.comment-card .post-actions .comment-reply { border:0; background:transparent; color:#54818f; }
.reply-quote { margin:10px 0 12px 43px; padding:8px 12px; border-left:3px solid #79bdce; border-radius:0 9px 9px 0; background:#edf7fa; font-size:12px; }
.reply-quote strong,.reply-quote span { display:block; overflow-wrap:anywhere; }
.reply-quote strong { color:#267a8c; margin-bottom:3px; }
.composer-reply { position:relative; display:grid; gap:4px; padding:10px 38px 10px 12px; margin-top:14px; border-left:3px solid #63b4c8; border-radius:0 10px 10px 0; background:#edf6fa; font-size:12px; }
.composer-reply[hidden] { display:none; }
.composer-reply span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#6c8591; }
.composer-reply button { position:absolute; right:8px; top:8px; border:0; border-radius:50%; width:26px; height:26px; background:#dbeef5; color:#4b7a8b; cursor:pointer; }
.composer-counter { grid-column:2/-1; justify-self:end; font-size:10px; color:#849ba5; font-variant-numeric:tabular-nums; }
.composer-counter:empty { display:none; }
.composer-counter.is-invalid { color:#bf4862; }
.composer-submit:disabled { opacity:.45; cursor:default; }
.post-edited { font-size:10px; color:#8699a3; }
.text-edit-composer.post-composer { display:block; padding:0; border:0; background:none; box-shadow:none; }
.text-edit-composer .rich-editor { min-height:140px; padding:14px; border:1px solid #d5e5ec; border-radius:12px; background:#fff; }
.text-edit-composer .composer-submit { display:flex; width:auto; margin-top:16px; margin-left:auto; padding:12px 20px; }
.text-edit-composer .composer-submit .submit-label { opacity:1; width:auto; }
.text-edit-composer .composer-submit svg { display:none; }
.post-link-dialog { width:min(820px,calc(100vw - 28px)); }
.post-link-dialog > .post-card { padding:0; }
.post-menu { max-height:calc(100dvh - 30px); overflow-y:auto; }
@media(max-width:600px) {
 .social-dialog { padding:18px; }
 .comment-card .post-attachments { margin-left:0; }
 .reply-quote { margin-left:0; }
 .comment-composer .composer-counter { grid-column:1/-1; }
}
.comment-card.is-highlighted { background:#eaf6fa; border-radius:12px; box-shadow:0 0 0 6px #eaf6fa; }
.post-author time { display:block; margin-top:2px; color:var(--net-muted); font-size:10px; }
html:has(dialog[open]) { overflow:hidden; }
.social-dialog { padding:0; }
.social-dialog > .item-dialog-header { position:sticky; top:0; z-index:20; padding:18px 24px; margin:0; background:#fbfdfe; border-bottom:1px solid #e0ebf0; }
.social-dialog > :not(.item-dialog-header) { margin:20px 24px; }
@media(max-width:600px) {
 .post-like .action-label { display:none; }
 .social-dialog > .item-dialog-header { padding:16px; }
 .social-dialog > :not(.item-dialog-header) { margin:16px; }
}