/* Case file media: composer attachments, list thumbnails, reader gallery, lightbox and branch thread. */
.cm-field { display: grid; gap: .55rem; }
.cm-label { color: var(--pink-dim); display: block; font-size: .68rem; letter-spacing: .1em; margin-bottom: .4rem; text-transform: uppercase; }
.cm-format { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .45rem; }
.cm-format[hidden], .cm-field[hidden] { display: none; }
.cm-format button, .cm-add, .cm-remove { background: var(--black); border: 1px solid var(--mid-gray); color: var(--off-white); cursor: pointer; font: inherit; font-size: .7rem; letter-spacing: .06em; min-width: 2rem; padding: .35rem .6rem; }
.cm-format button:hover, .cm-format button:focus-visible, .cm-add:hover, .cm-add:focus-visible, .cm-remove:hover, .cm-remove:focus-visible { border-color: var(--pink); color: var(--pink); outline: 0; }
.cm-format button[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: var(--black); }
.cm-editor { background: var(--black); border: 1px solid var(--mid-gray); color: var(--bright-white); font: inherit; line-height: 1.6; min-height: 220px; overflow-wrap: anywhere; overflow-y: auto; padding: .7rem; white-space: pre-wrap; width: 100%; }
.cm-editor:focus { border-color: var(--pink); outline: 0; }
.cm-add { justify-self: start; letter-spacing: .1em; padding: .6rem .9rem; text-transform: uppercase; }
.cm-add[disabled] { cursor: not-allowed; opacity: .5; }
.cm-hint { color: var(--light-gray); font-size: .72rem; line-height: 1.5; }
.cm-list { display: grid; gap: .6rem; }
.cm-item { background: var(--near-black, #0a0a0a); border: 1px solid var(--mid-gray); display: grid; gap: .8rem; grid-template-columns: minmax(132px, 168px) minmax(0, 1fr); padding: .75rem; position: relative; }
.cm-item img { align-self: start; aspect-ratio: 4 / 3; background: var(--black); height: auto; object-fit: contain; width: 100%; }
.cm-details { min-width: 0; padding: .2rem 4.5rem 0 0; }
.cm-item input { background: var(--black); border: 1px solid var(--mid-gray); color: var(--bright-white); font: inherit; font-size: .78rem; padding: .5rem; width: 100%; }
.cm-item input:focus { border-color: var(--pink); outline: 0; }
.cm-item .cm-remove { background: transparent; border: 0; color: var(--light-gray); font-size: .64rem; letter-spacing: .08em; min-width: 0; padding: .15rem 0; position: absolute; right: .75rem; text-transform: uppercase; top: .65rem; }
.cm-item .cm-remove:hover, .cm-item .cm-remove:focus-visible { border: 0; color: var(--pink); outline: 0; }
.cm-meta { color: var(--light-gray); display: block; font-size: .66rem; margin-top: .25rem; }

.case-file-row.has-thumb { grid-template-columns: 72px minmax(0, 1fr) auto; }
.case-file-row-thumb { background: var(--black); border: 1px solid var(--mid-gray); height: 72px; object-fit: cover; width: 72px; }
.case-file-row-badge { color: var(--pink); }

.case-file-gallery { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 0 1rem 1rem; }
.case-file-gallery[hidden] { display: none; }
.case-file-figure { display: grid; gap: .4rem; margin: 0; }
.case-file-figure button { background: var(--black); border: 1px solid var(--mid-gray); cursor: zoom-in; display: block; padding: 0; width: 100%; }
.case-file-figure button:hover, .case-file-figure button:focus-visible { border-color: var(--pink); outline: 0; }
.case-file-figure img { display: block; height: auto; max-height: 420px; object-fit: contain; width: 100%; }
.case-file-figure figcaption { color: var(--light-gray); font-size: .72rem; line-height: 1.5; }

.cm-lightbox { align-items: center; background: rgba(0, 0, 0, .94); display: flex; flex-direction: column; gap: .8rem; inset: 0; justify-content: center; padding: 1.2rem; position: fixed; z-index: 2000; }
.cm-lightbox[hidden] { display: none; }
.cm-lightbox img { border: 1px solid var(--mid-gray); max-height: 78vh; max-width: min(96vw, 1280px); object-fit: contain; }
.cm-lightbox p { color: var(--off-white); font-size: .8rem; line-height: 1.5; max-width: 60rem; text-align: center; }
.cm-lightbox button { background: var(--black); border: 1px solid var(--pink); color: var(--bright-white); cursor: pointer; font: inherit; font-size: .72rem; letter-spacing: .1em; padding: .55rem 1rem; text-transform: uppercase; }

.case-file-thread { background: var(--near-black); border: 1px solid var(--mid-gray); display: grid; gap: .9rem; margin: .8rem auto 0; max-height: min(38rem, 60vh); max-width: 800px; min-width: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; scrollbar-color: var(--pink-dim) var(--black); }
.case-file-thread[hidden] { display: none; }
.case-file-thread h3 { color: var(--pink-dim); font-size: .68rem; font-weight: normal; letter-spacing: .1em; margin: 0 0 .4rem; text-transform: uppercase; }
.case-file-thread ol { display: grid; gap: .4rem; list-style: none; margin: 0; min-width: 0; padding: 0; }
.case-file-thread-node { align-items: center; background: var(--black); border: 1px solid var(--mid-gray); box-sizing: border-box; color: inherit; cursor: pointer; display: grid; font: inherit; gap: .7rem; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; padding: .6rem .75rem; text-align: left; text-decoration: none; width: 100%; }
.case-file-thread-node:hover, .case-file-thread-node:focus-visible { border-color: var(--pink-dim); outline: 0; }
.case-file-thread-copy { display: grid; gap: .2rem; min-width: 0; }
.case-file-thread-node strong { color: var(--bright-white); font-size: .82rem; font-weight: normal; overflow-wrap: anywhere; }
.case-file-thread-copy > span { color: var(--light-gray); font-size: .7rem; overflow-wrap: anywhere; }
.case-file-thread-thumbs { align-items: center; display: flex; flex-wrap: wrap; gap: .25rem; justify-content: flex-end; max-width: 10rem; }
.case-file-thread-thumb { border: 1px solid var(--mid-gray); display: block; height: 2.7rem; object-fit: cover; width: 2.7rem; }
.case-file-thread ol ol { border-left: 1px solid var(--mid-gray); margin: .4rem 0 0 .55rem; padding-left: .65rem; }
.case-file-thread li { min-width: 0; }
.case-file-thread-node.active { background: #160b12; border-color: var(--pink); cursor: default; }
.case-file-thread-node.active strong { color: var(--pink); }
.case-file-thread-node.active .case-file-thread-copy > span::before { content: 'Viewing // '; color: var(--pink-dim); }
.case-file-thread-continue { justify-self: start; }

@media (max-width: 640px) {
    .cm-item { grid-template-columns: 112px minmax(0, 1fr); }
    .case-file-row.has-thumb { grid-template-columns: 64px minmax(0, 1fr); }
    .case-file-row.has-thumb .case-file-row-verified { grid-column: 1 / -1; }
    .case-file-row-thumb { height: 64px; width: 64px; }
}

.declassify-overlay { align-items: center; background: rgba(0, 0, 0, .82); display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 10000; }
.declassify-box { background: var(--near-black); border: 1px solid var(--pink); display: grid; gap: .8rem; max-height: 92vh; max-width: 520px; overflow-y: auto; padding: 1.25rem; width: 100%; }
.declassify-box h2 { color: var(--bright-white); font-size: 1rem; letter-spacing: .14em; margin: 0; text-transform: uppercase; }
.declassify-note { color: var(--light-gray); font-size: .8rem; line-height: 1.55; margin: 0; }
.declassify-warning { border-left: 2px solid var(--pink-dim); color: var(--off-white); padding-left: .6rem; }
.declassify-warning a, .declassify-status a { color: var(--pink); }
.declassify-modes { display: flex; gap: 1.25rem; }
.declassify-modes label { color: var(--off-white); cursor: pointer; font-size: .8rem; }
.declassify-modes input { accent-color: var(--pink); }
.declassify-text { background: var(--black); border: 1px solid var(--mid-gray); color: var(--bright-white); font: inherit; font-size: .85rem; line-height: 1.55; padding: .65rem; resize: vertical; width: 100%; }
.declassify-text:focus { border-color: var(--pink); outline: 0; }
.declassify-text::placeholder { color: var(--light-gray); opacity: .5; }
.declassify-counter { color: var(--light-gray); font-size: .7rem; justify-self: end; margin-top: -.5rem; }
.declassify-counter.over { color: var(--red); }
.declassify-card { background: var(--black); border: 1px solid var(--mid-gray); display: grid; gap: .7rem; grid-template-columns: auto minmax(0, 1fr); overflow: hidden; }
.declassify-card img { display: block; height: 100%; max-height: 110px; object-fit: cover; width: 110px; }
.declassify-card > div { align-content: center; display: grid; gap: .25rem; min-width: 0; padding: .6rem .7rem; }
.declassify-card strong { color: var(--bright-white); font-size: .82rem; font-weight: normal; overflow-wrap: anywhere; }
.declassify-card span, .declassify-card small { color: var(--light-gray); font-size: .72rem; line-height: 1.45; overflow-wrap: anywhere; }
.declassify-card:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.declassify-status { color: var(--green); font-size: .78rem; margin: 0; min-height: 1.2em; }
.declassify-status.error { color: var(--red); }
.declassify-actions { display: flex; gap: .65rem; justify-content: flex-end; }
.declassify-actions button { background: transparent; border: 1px solid var(--mid-gray); color: var(--off-white); cursor: pointer; font: inherit; font-size: .74rem; letter-spacing: .1em; padding: .6rem .9rem; text-transform: uppercase; }
.declassify-actions button.primary { border-color: var(--pink); color: var(--bright-white); }
.declassify-actions button:hover:not(:disabled), .declassify-actions button:focus-visible { background: var(--pink); color: var(--black); outline: 0; }
.declassify-actions button:disabled { cursor: not-allowed; opacity: .5; }
.case-file-declassify.cleared { border-color: var(--green); color: var(--green); }

/* The hidden attribute must win over the class display, or a guest sees an empty button. */
.case-file-declassify[hidden], .case-file-action-group [hidden] { display: none !important; }