/* Compose, previews, posts list. Tokens only (docs/UI.md). */

.compose { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.compose > * { min-width: 0; }
/* Only the When card stays in view, with the action button: a tall side
   column that scrolled on its own hid the checks below the fold. */
@media (min-width: 961px) { .compose__side .go { position: sticky; top: 5rem; z-index: 2; } }
@media (max-width: 960px) { .compose { grid-template-columns: minmax(0, 1fr); } }

/* Account chips */
.acc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.acc-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.8rem 0.4rem 0.5rem; border: var(--border) solid var(--rule-strong); border-radius: var(--radius-pill); background: var(--paper); cursor: pointer; font-size: var(--text-sm); }
.acc-chip:has(input:checked) { border-color: var(--ink); background: var(--paper-deep); }
.acc-chip input { accent-color: var(--ink); margin: 0; }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--rule); padding-bottom: var(--space-2); }
/* The version tabs and "Customise for" share one bar. */
.tabs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); border-bottom: 1px solid var(--rule); padding-bottom: var(--space-2); }
.tabs-bar .tabs { border: 0; padding: 0; }
.tabs-bar__customise { gap: var(--space-2); }
.tabs [role="tab"] { display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-size: var(--text-sm); padding: 0.4rem 0.8rem; border-radius: var(--radius-pill); border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer; }
.tabs [role="tab"]:hover { background: var(--paper-deep); }
.tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--paper); }
.compose__tools { gap: var(--space-2) var(--space-5); }
.tool { position: relative; }
.tool summary { list-style: none; }
.tool summary::-webkit-details-marker { display: none; }
.tool[open] .tool__body { position: absolute; z-index: 6; top: calc(100% + 0.3rem); left: 0; width: min(24rem, 80vw); background: var(--paper); border: var(--border) solid var(--ink); border-radius: 1rem; padding: var(--space-4); }
.tool__body ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.tool__body .chip { cursor: pointer; font: inherit; font-family: var(--mono); font-size: var(--text-xs); }
.parts { padding-left: var(--space-4); border-left: 2px solid var(--rule); }
.part label { display: grid; gap: 0.35rem; font-weight: 600; font-size: var(--text-sm); }

/* Media strip */
.strip { display: grid; gap: var(--space-3); }
.strip__items { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.strip__items:empty { display: none; }
.strip__item { width: 7.5rem; display: grid; gap: 0.25rem; margin: 0; align-content: start; }
.strip__cap { display: grid; gap: 0.1rem; min-height: 2.6rem; align-content: start; }
.strip__num { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-soft); }
.strip__alt { text-decoration: underline; text-underline-offset: 0.2em; }
.strip__alt:hover { color: var(--ink); }
.strip__item img, .strip__missing { width: 7.5rem; height: 7.5rem; object-fit: cover; border-radius: var(--radius-field); background: var(--paper-deep); border: 1px solid var(--rule); }
.strip__missing { display: grid; place-items: center; color: var(--ink-soft); }
.picker summary { list-style: none; }
.picker summary::-webkit-details-marker { display: none; }
.picker[open] { width: 100%; }
.picker__body { margin-top: var(--space-3); padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--paper); max-height: 26rem; overflow-y: auto; }
.upload-btn { position: relative; }
.upload-btn:focus-within { outline: var(--focus); outline-offset: 3px; }

/* Labels */
.label-pick { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--text-sm); }
.label-pick input { accent-color: var(--ink); }
.swatch { width: 0.8rem; height: 0.8rem; border-radius: 50%; display: inline-block; border: 1px solid var(--rule-strong); }
.swatch--teal { background: #0B8F88; }
.swatch--mint { background: #B0FFAC; }
.swatch--gold { background: #F9D323; }
.swatch--coral { background: #FF4E50; }
.swatch--slate { background: #3D5450; }
.swatch--ink { background: #0A1F1D; }

/* Side panel: save state and checks */
.save-state { display: flex; align-items: center; gap: var(--space-3); min-height: 1.5rem; }
.checks { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.checks:empty { display: none; } /* no accounts chosen: only the general problem shows */
.checks__acc { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.checks__acc:first-child { border-top: 0; padding-top: 0; }
.checks__name { font-weight: 600; font-size: var(--text-sm); }
.checks__problems { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.checks__problems:empty { display: none; }
/* A check's problem reads as a sentence, in body type, not as a status word. */
.check-problem { text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: var(--text-sm); align-items: flex-start; line-height: 1.4; }
.check-problem::before { margin-top: 0.3rem; }
.count { margin-left: auto; font-family: var(--mono); font-size: var(--text-sm); color: var(--ink-soft); }
.count--near { color: var(--warn); }
.count--over { color: var(--bad); font-weight: 500; }

/* Previews: a guide to how the post will look, not a pixel copy */
.pv { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: var(--space-4); display: grid; gap: var(--space-3); }
.pv__head { display: flex; align-items: center; gap: var(--space-3); }
.pv__head .pbadge { margin-left: auto; }
.pv__who { display: grid; line-height: 1.25; min-width: 0; }
.pv__who strong { font-size: var(--text-sm); }
.pv__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv__title { font-size: var(--text-md); }
.pv__text { white-space: normal; overflow-wrap: anywhere; font-size: 0.95rem; max-width: none; }
.pv__link, .pv__tag { color: var(--teal-ink); }
.pv__more { color: var(--ink-soft); }
.pv__media { display: grid; gap: 3px; border-radius: var(--radius-field); overflow: hidden; }
.pv__media--1 { grid-template-columns: 1fr; }
.pv__media--2, .pv__media--3, .pv__media--4 { grid-template-columns: 1fr 1fr; }
.pv__media--3 .pv__tile:first-child { grid-row: span 2; }
.pv__tile { position: relative; background: var(--paper-deep); min-height: 6rem; }
.pv__tile img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.pv__media--1 .pv__tile img { aspect-ratio: auto; max-height: 22rem; object-fit: contain; }
.pv__badge, .pv__more-media { position: absolute; font-family: var(--mono); font-size: var(--text-xs); background: var(--ink); color: var(--paper); border-radius: var(--radius-pill); padding: 0.15rem 0.5rem; }
.pv__badge { left: 0.4rem; bottom: 0.4rem; }
.pv__more-media { right: 0.4rem; bottom: 0.4rem; }
.pv__card { display: grid; gap: 0.2rem; border: 1px solid var(--rule); border-radius: var(--radius-field); padding: var(--space-3); background: var(--paper-dim); }
.pv__reply, .pv__comment { border-left: 2px solid var(--rule); padding-left: var(--space-3); display: grid; gap: var(--space-1); }
/* Story and vertical video: a 9:16 frame that scales to the column. Text on
   the frame sits on an ink scrim so it reads over any picture. */
.pv--story, .pv--vertical { justify-items: center; }
.pv__frame { position: relative; width: min(100%, 20rem); aspect-ratio: 9 / 16; background: var(--ink); color: var(--paper); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.pv--story > p { justify-self: stretch; }
.pv__fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv__top, .pv__over { position: relative; display: grid; gap: var(--space-2); padding: var(--space-3); }
.pv__top { background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 70%, transparent), transparent); }
.pv__over { background: linear-gradient(to top, color-mix(in srgb, var(--ink) 85%, transparent) 60%, transparent); padding-top: var(--space-6); }
.pv__bar { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.pv__bar .pbadge { margin-left: auto; }
.pv__handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pv__frame .pv__more, .pv__frame .pv__link, .pv__frame .pv__tag { color: var(--paper); }
.pv__frame .pv__link { text-decoration: underline; }
.pv__frame .pv__text { font-size: var(--text-sm); }
.pv__frame .pv__title { font-size: var(--text-md); }
.pv__frame .tag { background: var(--paper); color: var(--ink); }
.pv__progress { height: 3px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--paper) 40%, transparent); position: relative; }
.pv__progress::after { content: ""; position: absolute; inset: 0 70% 0 0; border-radius: inherit; background: var(--paper); }

/* Carousel: swipe with CSS scroll-snap, no JavaScript. */
.pv__strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-2); border-radius: var(--radius-field); overscroll-behavior-x: contain; }
.pv__strip:focus-visible { outline: var(--focus); outline-offset: 3px; }
.pv__slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; background: var(--paper-deep); }
.pv__slide img { display: block; width: 100%; max-height: 24rem; object-fit: contain; }
.pv__slide .pv__badge { left: 0.4rem; bottom: 0.4rem; }
.pv__pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pv__dots { display: flex; gap: var(--space-1); }
.pv__dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--rule-strong); }
.pv__dot--on { background: var(--ink); }

/* Posts list */
.filter-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.filter-tabs a { text-decoration: none; color: var(--ink); padding: 0.4rem 0.85rem; border-radius: var(--radius-pill); border: 1px solid var(--rule-strong); font-size: var(--text-sm); display: inline-flex; gap: 0.45rem; align-items: center; }
.filter-tabs a:hover { background: var(--paper-dim); }
.filter-tabs a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.posts-table__text { max-width: 26rem; }
.posts-table__text a { color: var(--ink); text-decoration: none; font-weight: 500; }
.posts-table__text a:hover { text-decoration: underline; }
textarea[rows="2"], textarea[rows="3"] { min-height: 0; }
.tool[open] .tool__body--right { left: auto; right: 0; }
.go .choice input[type="datetime-local"] { margin: 0.4rem 0; }
/* "Add to thread" and its note: side by side, the note on its own line on phones. */
.thread-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
@media (max-width: 600px) {
  .thread-add .small { flex-basis: 100%; }
  .compose label.check { min-height: 2.25rem; align-items: center; }
  .compose label.check input { margin-top: 0; }
}
.go legend { margin-bottom: var(--space-2); }
/* Approval screen */
.approval__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: start; }
.approval__buttons .btn { padding-block: 0.95rem; font-size: 0.9rem; min-height: 3.25rem; }
/* What the post says, inside the decision card. Beside the card on a wide
   screen the previews already show it, so this is for phones. */
.approval__peek { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-field); }
.approval__thumb { width: 5rem; height: 5rem; object-fit: cover; border-radius: 0.5rem; flex-shrink: 0; background: var(--paper-deep); }
.approval__peek-body { min-width: 0; }
.approval__excerpt { white-space: pre-line; overflow-wrap: anywhere; max-width: none; }
@media (min-width: 961px) { .approval__peek { display: none; } }
.reject summary { list-style: none; }
.reject summary::-webkit-details-marker { display: none; }
.reject[open] { grid-column: 1 / -1; }
.reject form { margin-top: var(--space-3); }
@media (max-width: 520px) { .approval__buttons { grid-template-columns: 1fr; } }
.comments { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.comment { border-left: 2px solid var(--rule-strong); padding-left: var(--space-3); }
.comment p { margin-top: 0.2rem; }

/* ---------- formats: tab labels, the account tab's picker, board sections ---------- */
/* "Instagram @harbour · Reel": the format in mono beside the handle. */
.tab__fmt { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.04em; }
/* The account's Format, its help, setup and limits, in one well at the top
   of its tab. */
.fmt-pick { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-field); }
.fmt-pick__req .lamp { margin-right: 0.25rem; vertical-align: 0.05em; }
.fmt-pick__cannot ul { padding-left: 1.1rem; display: grid; gap: var(--space-1); }
/* Disclosures here are tap targets on a phone: 36px with their padding. */
.fmt-pick__cannot > summary, .text-off > summary { padding-block: 0.6rem; }
.text-off[open] > summary { margin-bottom: var(--space-3); }
/* An account that is not customised: what it uses, and the way to change it. */
.uses-base { display: grid; gap: var(--space-3); justify-items: start; }
.uses-base .btn { white-space: normal; text-align: center; }
/* Pinterest's board and its section, side by side where there is room. */
.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4); align-items: start; }
.tabs-bar__open { gap: var(--space-2); }