/* css/clips-week-view.css: the week view on the Clips Post step (js/clips/clips-week-view.js; .cwv-* ONLY).
   UX review item 04: every finished Clip in a row, each put on a day of the Post step's week strip. The row sits
   inside the studio root (.clstudio) and reads its colours; the "Pick a day" sheet is the app's CBSheet. */
.cwv-box { min-width: 0; max-width: 100%; }
.cwv { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; }
.cwv-head { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; }
.cwv-head span { color: var(--cst-ink-2, #55524c); }
.cwv-list { display: flex; gap: 10px; min-width: 0; max-width: 100%; margin: 0; padding: 2px 2px 6px; list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* position: relative keeps each card's hidden label (.cwv-sr, absolutely placed) inside the row's own
   scroll box. Without it the labels of the cards past the edge were placed against the page instead, and
   the whole page scrolled sideways (dev7, 25 Oct 2026: 649px over at 390 wide, 483px at 1280). */
.cwv-clip { position: relative; flex: 0 0 168px; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 12px; background: #fff;
  border: 1px solid var(--cst-line, #e3ded4); cursor: grab; min-width: 0; }
.cwv-clip.is-this { border: 2px solid var(--cst-ind, #4338CA); padding: 7px; }
.cwv-clip.is-dragging { opacity: .5; }
/* The whole upright picture, never cropped: its height is set and its width follows from 9:16. */
.cwv-pic { display: block; align-self: center; height: 120px; width: auto; aspect-ratio: 9 / 16; border-radius: 8px; background: #1b1828 center / cover no-repeat; }
.cwv-t { font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 2px; }
.cwv-t small { font-size: 11px; font-weight: 600; color: var(--cst-ind-d, #3127a8); }
.cwv-pick { align-self: stretch; min-height: 40px; border-radius: 999px; border: 1px solid var(--cst-ind, #4338CA); background: #fff;
  color: var(--cst-ind-d, #3127a8); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cwv-pick:focus-visible, .cwv-day:focus-visible { outline: 2px solid var(--cst-ind, #4338CA); outline-offset: 2px; }
.cwv-sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.cwv-over { outline: 2px dashed var(--cst-ind, #4338CA); outline-offset: 2px; background: var(--cst-ind-soft, #EEEDFD); }
/* The "Pick a day" sheet: one big button a day, easy to hit on a phone. */
.cwv-days { display: flex; flex-direction: column; gap: 8px; }
.cwv-day { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid #e3ded4; background: #fff; font-family: inherit; font-size: 15px; font-weight: 600; color: #1f1d1a; cursor: pointer; text-align: left; }
.cwv-day:hover:not(:disabled) { border-color: #4338CA; background: #F7F6FF; }
.cwv-day:disabled { color: #9a958c; cursor: default; }
.cwv-day small { font-size: 12px; font-weight: 500; }
@media (max-width: 760px) {
  .cwv-clip { flex-basis: 140px; }
  .cwv-pic { height: 96px; }
}