/* css/post-sheet.css — the one post sheet (js/post-sheet.js): its TALL layout and the "Write a
   post" step. The panel layout is the One Social Desk window and keeps its own stylesheet,
   css/community-share.css (.csh-*), unchanged.

   ⚠️ THE TALL LAYOUT IS THE APPROVED CLIPS ARTEFACT'S SCREEN E
   (docs/projects/content-engine/virals-research/index.html, "Ready to post, 1 of 3"): its sizes,
   radii and colours, on the app's tokens (design-tokens.css). Clips draws it inside its own page
   (css/clips-flow.css, the bar and the sticky foot); any other caller can mount it the same way.

   .psh-* ONLY. The video facade (video-embed-runtime.js) is styled only inside .psh-vid. */

/* ── The tall layout ───────────────────────────────────────────────────── */
.psh-i { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; }
.psh-net { width: 26px; height: 26px; flex: none; }
.psh-eb {
  font: 600 11.5px/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .15em;
  text-transform: uppercase; color: var(--text-3);
}
.psh-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }
.psh-note { padding: 16px; font-size: 16px; color: var(--text-2); }
.psh-note p { margin: 0; }
.psh-skel { display: grid; gap: 12px; padding: 4px 0; }
.psh-skel i { display: block; height: 16px; border-radius: 8px; background: var(--surface-3); }
.psh-skel i:first-child { height: 220px; border-radius: 16px; }

.psh-top { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; }
.psh-vid { position: relative; width: 150px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #222; }
.psh-vid .video-facade {
  position: absolute; inset: 0; cursor: pointer; background-color: #222; background-position: center;
  background-size: cover; background-repeat: no-repeat;
}
.psh-vid .video-player { position: absolute; inset: 0; }
.psh-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .45)); }
.psh-dur {
  position: absolute; right: 10px; top: 10px; font: 600 12px "JetBrains Mono", ui-monospace, monospace;
  color: #fff; background: rgba(0, 0, 0, .45); border-radius: 6px; padding: 2px 6px;
}
.psh-playb {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgba(255, 255, 255, .88); display: grid; place-items: center;
  color: #0f1020; font-size: 18px;
}
.psh-playb .psh-i { margin-left: 2px; }
.psh-tx { display: grid; gap: 8px; min-width: 0; }
.psh-title { font: 700 19px/1.2 "Bricolage Grotesque", Georgia, serif; color: var(--text); }
.psh-lead { font-size: 14px; line-height: 1.4; color: var(--text-2); }
/* The time chip, "Tue 7:30pm": the artefact's small chip (its .bx: 4px 10px, 13px, round). 48px is
   a hit AREA, not a painted height (CODING-STANDARDS CC-8): the ::after grows the target past the
   paint, so it taps as easily as the 48px pill it replaces (acceptance, 11 Oct: "a tall pill") and
   looks like the drawing. The time sheet it opens is the Change link's, so where their targets meet
   either one is right. Only the tall layout draws it (Clips E). */
.psh-when {
  justify-self: start; position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep);
  font: 600 13px/1.2 "Inter", system-ui, sans-serif; white-space: nowrap; cursor: pointer;
}
.psh-when::after { content: ""; position: absolute; inset: -13px -4px; }
.psh-when:hover { background: #e4dcff; }
.psh-why { font-size: 13.5px; line-height: 1.35; color: var(--text-3); }
.psh-link {
  border: 0; background: none; padding: 10px 2px; margin: -10px 0; color: var(--accent-deep);
  font: inherit; font-weight: 600; cursor: pointer;
}
.psh-link:hover { text-decoration: underline; }

/* The grid: Checked · Open to check · Not connected · Soon. Every network is in it, connected or
   not (Alex, 2026-10-11), so it is two columns of three, with the coach's own community across the
   top when they have one. */
.psh-nets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.psh-nchip-wide { grid-column: 1 / -1; }
.psh-nchip {
  display: flex; gap: 10px; align-items: center; text-align: left; min-height: 58px; padding: 10px 12px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font: inherit; cursor: pointer; min-width: 0;
}
.psh-nchip > span { display: grid; line-height: 1.2; min-width: 0; }
.psh-nchip b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psh-nchip small { font-size: 12.5px; }
.psh-nchip:hover { border-color: var(--border-strong); }
.psh-nchip.is-ok small, .psh-nchip.is-done small { color: var(--good); font-weight: 600; }
.psh-nchip.is-todo { border: 2px solid #e2b765; background: var(--warn-soft); padding: 9px 11px; }
.psh-nchip.is-todo small { color: #8a560a; font-weight: 600; }
.psh-nchip.is-writing small { color: var(--accent-deep); font-weight: 600; }
.psh-nchip.is-off small, .psh-nchip.is-setup small { color: var(--text-3); font-weight: 600; }
/* A network left out keeps its logo as published (never faded); "Left out" says it in words. */
.psh-nchip.is-setup { border-style: dashed; border-color: var(--border-strong); }
.psh-nchip.is-soon { opacity: .55; cursor: default; }
.psh-nchip.is-soon small { color: var(--text-3); }
.psh-nchip:focus-visible, .psh-when:focus-visible, .psh-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.psh-words { padding: 12px 14px; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; }
/* Why the last schedule did not go out (GET /clips/:id/post last_attempt), above the networks. */
.psh-last { padding: 12px 14px; font-size: 15px; line-height: 1.45; background: var(--warn-soft); border-color: #ecd3a1; color: #7a4b07; }
.psh-words .psh-eb { font-size: 10.5px; }
/* "Facebook posts its own version. Open to check" (post-sheet.js ownWordsHtml): the line under the
   caption when a network posts Maya's words for it rather than these. */
.psh-own { font-size: 13.5px; line-height: 1.35; color: var(--text-3); }
.psh-own[hidden] { display: none; }

/* The button that names what is needed. Pale while it opens the next network, still pressable. */
.psh-btn {
  min-height: 54px; width: 100%; border-radius: 12px; border: 0; cursor: pointer; padding: 0 18px;
  display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff;
  font: 600 17px "Inter", system-ui, sans-serif; box-shadow: 0 4px 12px -4px rgba(106, 76, 241, .55);
}
.psh-btn:hover { background: var(--accent-deep); }
/* While previews are left it is an instruction you can press ("Preview your community first"
   opens it), so it reads as one: outlined in the accent, never pale like a disabled button. */
.psh-btn.is-off { background: var(--surface); color: var(--accent-deep); border: 2px solid var(--accent); box-shadow: none; }
.psh-btn.is-off:hover { background: var(--accent-soft); }
.psh-btn[disabled] { opacity: .6; cursor: default; }
.psh-fn { text-align: center; font-size: 14px; color: var(--text-3); }

@media (min-width: 700px) {
  .psh-top { grid-template-columns: 170px 1fr; }
  .psh-vid { width: 170px; }
}

/* ── A network's own sheet (CBSheet.panel), and the time sheet ─────────── */
.psh-sheet { display: grid; gap: 10px; font: 15px/1.5 "Inter", system-ui, sans-serif; color: var(--text); }
/* A grid item is as wide as its widest unbreakable content unless told otherwise: YouTube's channel
   row (the name at its full width, then Subscribe) widened the column past the sheet at 390 and
   clipped the editor on the right. */
.psh-sheet > * { min-width: 0; }
.psh-sheet .csh-ta { min-height: 120px; }
.psh-prev .sp-tall.sp-tall { width: min(100%, 240px); }
.psh-p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.psh-warn { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--danger-soft); color: #8e2f28; font-size: 14.5px; }
.psh-whens .csh-whens { display: grid; grid-template-columns: 1fr 1fr; }
/* The date box behind "Pick a time" (post-sheet.js whensHtml) is also a .csh-row, whose
   display:flex beats the browser's own [hidden], so it showed under "Tomorrow, 9 am" in the panel
   and in the time sheet alike. */
.psh-at[hidden] { display: none; }

/* ── "Write a post": what it says, and its picture or video ─────────────── */
.psh-src-media { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.psh-src-pic { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.psh-src-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.psh-src-x {
  position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; border-radius: 50%; border: 0;
  background: rgba(15, 16, 32, .72); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
}
.psh-src-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border); font-weight: 600; font-size: 14px;
}

/* ── The coach's own community, as a place the post goes (Alex, 2026-10-11) ─ */
/* The panel's chip row hides Community (community-share.css: a community post's own Share window
   is already there); a source that offers it shows it again. */
/* (The class twice: community-share.css's hiding rule is as specific as one, and loads first.) */
.psh-with-community.psh-with-community .cch-wrap:has(> .cch[data-cch="community"]) { display: inline-flex; }
/* Its preview: the post as members see it, plainly. */
.psh-cm {
  display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); font: 15px/1.5 "Inter", system-ui, sans-serif; min-width: 0;
}
.psh-cm-head { display: flex; gap: 10px; align-items: center; min-width: 0; }
.psh-cm-head > span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.psh-cm-head b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psh-cm-head small { font-size: 12.5px; color: var(--text-3); }
.psh-cm-av {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep); font-weight: 700;
}
.psh-cm-title { font: 700 17px/1.25 "Bricolage Grotesque", Georgia, serif; overflow-wrap: anywhere; }
.psh-cm-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.psh-cm-media {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #222 center / cover no-repeat;
}
.psh-cm-media.is-video { width: min(100%, 220px); aspect-ratio: 9 / 16; }

/* ── Preview, and nothing goes out until the button (Alex, 2026-10-11) ─────── */
/* The reassurance where they decide, on Clips E and on the panel. Calm, not a warning. */
.psh-safe {
  display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px;
  background: var(--good-soft, #e7f6ee); color: var(--text); font: 500 14.5px/1.4 "Inter", system-ui, sans-serif;
}
.psh-safe .psh-i { color: var(--good, #0f7a43); font-size: 18px; margin-top: 1px; }
/* Over every preview: it is a preview, and nothing has been posted. */
.psh-prev-note {
  margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); color: var(--text-2);
  font: 600 13px/1.35 "Inter", system-ui, sans-serif; justify-self: start;
}
.psh-prev-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
/* Under the panel's button: what pressing it does. */
.psh-fn-panel { margin: 0; font-size: 13.5px; text-align: left; }
/* After Schedule on Clips E: "Scheduled, not posted yet", where and when, and what can still change. */
.psh-done { padding: 20px 18px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.psh-done-tick {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--good-soft, #e7f6ee); color: var(--good, #0f7a43); font-size: 22px; font-weight: 700;
}
.psh-done h3 { margin: 0; font: 700 20px/1.25 "Bricolage Grotesque", Georgia, serif; color: var(--text); }
.psh-done p { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--text-2); max-width: 34em; }
.psh-done-acts { display: grid; gap: 8px; width: 100%; max-width: 360px; margin-top: 4px; }
.psh-done-acts .psh-btn { min-height: 50px; font-size: 16px; }
.psh-btn.psh-btn-quiet { background: var(--surface); color: var(--accent-deep); border: 1px solid var(--border); box-shadow: none; }
.psh-btn.psh-btn-quiet:hover { background: var(--surface-2); }
/* Clips E's sticky foot: solid, with a hairline, so content scrolls under a clean edge
   (the frame's own foot fades from clear, which let the words card show half through it). */
.psh-foot.psh-foot { background: var(--bg); box-shadow: 0 -1px 0 var(--border), 0 -10px 18px -14px rgba(15, 16, 32, .28); }
/* "Posting as": the name in full, wrapping, on every width. */
.psh-as { margin: 0; padding: 9px 11px; border-radius: 10px; background: var(--surface-2); color: var(--text-2);
  font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }