/* 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 2×2 grid: Checked · Open to check · Not connected · Soon. */
.psh-nets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.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 { 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); }
.psh-btn.is-off { background: #d9d3f7; box-shadow: none; }
.psh-btn.is-off:hover { background: #cbc2f3; }
.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;
}