/**
 * Social post composer groups (TS-5140).
 *
 * The composer used to be one block headed "Links and Attachments" holding
 * the image, link, video, target viewer, timezone, publish date and time and
 * the repeat options. Nothing signalled where one decision ended and the next
 * began, so unrelated fields sat side by side in the two-column flow.
 *
 * These are separators, not decoration: a hairline rule and a quiet heading,
 * so the grouping reads without adding boxes-within-boxes to a page that
 * already has cards. Uses the house tokens rather than hardcoded hex so a
 * palette change reaches this form.
 */

.ts-compose-group {
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--ca-line, #E9E5F2);
}

/* The first group follows the section heading, which is separator enough. */
.ts-compose-group:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

/* One card-header pattern for every panel on this page (TS-5167).
 *
 * The page carried three treatments for one job: sentence-case bold ink
 * ("Post preview", the day detail's date), uppercase muted grey (Audience,
 * Schedule), and no heading at all on the calendar card. Sentence-case bold
 * ink wins because it was already the majority in service here, and because
 * the uppercase variant used --paragraph, the 3.42:1 AA failure in TS-5166.
 *
 * Deliberately NOT the D5 eyebrow: that is 11px/600/uppercase/0.08em and
 * sits ABOVE a headline as a second element, rather than replacing it.
 *
 * Composer-local until TS-5133 writes card anatomy into the style guide, at
 * which point this should become the house rule rather than stay here.
 */
.ts-card-title,
.ts-compose-group__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--title, #3e2155);
  margin: 0 0 12px;
}

/* Sits under a group title to say what the group is for. Used where the
   fields alone do not explain the consequence, as with the target viewer
   changing what the AI writes. */
.ts-compose-group__hint {
  font-size: 13px;
  color: var(--paragraph, #6b6880);
  margin: -6px 0 14px;
  max-width: 62ch;
}

/* Audience will grow when follower data from the connected platforms lands,
   so it is given room to breathe rather than being packed to one row. */
.ts-compose-group--audience .control-field {
  max-width: 420px;
}

/* Two-column layout (TS-5140).
 *
 * The settings live in a 5-of-12 column beside the compose panel from xxl up.
 * The fields inside were written for a full-width row and carry col-lg-6, which
 * in a narrow column would leave them at a quarter of the page. Inside the
 * settings column each field takes the full width instead, so the column reads
 * as a single list rather than a cramped grid.
 *
 * Scoped to .social-links and to the xxl breakpoint, so the fields keep their
 * original two-across layout when the columns stack on smaller screens.
 */
@media (min-width: 1400px) {
  .social-links .ts-compose-group > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Audience is a single control; the cap that gave it breathing room in a
     full-width row would leave it stranded in a narrow one. */
  .social-links .ts-compose-group--audience .control-field {
    max-width: none;
  }
}

/* Just-in-time calendar (TS-5140).
 *
 * Mounts when a scheduling mode is picked and is absent otherwise, so the
 * cadence view is there exactly when the question "when do my other posts go
 * out" is being asked, and costs no room when publishing immediately.
 *
 * The component carries col-xxl-6 from when it sat in a full-width row beside
 * the preview. Inside the settings column that would leave it at half of an
 * already narrow column, so it is forced to full width here rather than
 * changing the component, which is shared.
 */
.ts-schedule-calendar > [class*="col-"] {
  /* width, not flex. Bootstrap's col-xxl-6 sets `flex: 0 0 auto; width: 50%`,
     and this wrapper is a plain block rather than a row, so a flex-basis
     override does nothing at all - the calendar simply stayed at half its
     column and wrapped its day headers to two lines ("Su n", "M on"). */
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  padding-left: 0;
  padding-right: 0;
}

.ts-schedule-calendar {
  animation: ts-schedule-calendar-in 180ms ease-out;
}

@keyframes ts-schedule-calendar-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Motion here is decoration, not information: the calendar appearing is
   already obvious from the layout shift, so anyone who has asked for less
   motion loses nothing by skipping it. */
@media (prefers-reduced-motion: reduce) {
  .ts-schedule-calendar {
    animation: none;
  }
}

/* The scheduled plan (TS-5140).
 *
 * Summarises what the Autoposter produced. Without it the modal closed and the
 * form showed no trace of the several posts you had just scheduled, so the
 * only way to check your own plan was to reopen the modal.
 */
.ts-post-plan {
  border-radius: 10px;
  background: var(--primary-light, #F2EEF8);
  padding: 12px 14px;
}

.ts-post-plan__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.ts-post-plan__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--title, #3E2155);
}

.ts-post-plan__edit {
  font-size: 13px;
}

.ts-post-plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ts-post-plan__item {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  padding: 5px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

.ts-post-plan__item:first-child {
  border-top: 0;
}

.ts-post-plan__when {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--title, #3E2155);
  white-space: nowrap;
}

/* min-width 0 lets the long variation text truncate rather than forcing the
   row wider than the column. */
.ts-post-plan__what {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--paragraph, #6b6880);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Schedule mode picker.
 *
 * Three cards rather than a dropdown, because this is the choice that decides
 * which other fields exist, and a dropdown hides that consequence behind a
 * click. Each carries a one-line hint, since "Repeat" alone does not convey
 * that each repeat is worded differently.
 */
.ts-schedule-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* Sits in a Bootstrap column, so it inherits the grid's box model. Without
     these the third card was pushed past the container's right edge and its
     hint text was clipped. */
  width: 100%;
  box-sizing: border-box;
}

.ts-schedule-mode {
  /* min-width 0 lets a card shrink below its content width so three fit on a
     row and wrap cleanly, instead of one overflowing. */
  flex: 1 1 200px;
  min-width: 0;
  box-sizing: border-box;
  display: block;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ca-line, #E9E5F2);
  transition: box-shadow .12s ease, background .12s ease;
  margin: 0;
}

.ts-schedule-mode:hover {
  background: var(--primary-light, #F2EEF8);
}

/* Selected state is carried by the ring and the label weight, not colour
   alone, so it survives a greyscale render and does not rely on the radio
   dot being visible. */
.ts-schedule-mode.is-selected {
  background: var(--primary-light, #F2EEF8);
  box-shadow: inset 0 0 0 2px var(--primary-color, #672c72);
}

/* The native radio stays in the DOM for keyboard and screen reader support;
   it is only visually replaced by the card. */
.ts-schedule-mode input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ts-schedule-mode__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--title, #3E2155);
}

.ts-schedule-mode.is-selected .ts-schedule-mode__label {
  color: var(--primary-color, #672c72);
}

.ts-schedule-mode__hint {
  display: block;
  font-size: 12.5px;
  color: var(--paragraph, #6b6880);
  margin-top: 2px;
}

/* Keyboard focus has to be visible on the card, since the real radio is
   visually hidden. */
.ts-schedule-mode input[type="radio"]:focus-visible + .ts-schedule-mode__label {
  outline: 2px solid var(--primary-color, #672c72);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Compose actions (TS-5140).
 *
 * "Write this for me" leads and is green, the Go colour in the house palette.
 * Everything else in this row is a secondary way of working on text you have
 * already got, so it sits after.
 */
.ts-compose-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Pushes the wording counter to the right, keeping the buttons grouped. */
.ts-compose-actions .variation-count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--paragraph, #6b6880);
}

.ts-generate-btn {
  /* Was #1B7F4B, which is a second green for the same job. .ts-go-btn in
     ts_react.css uses #178055 and means exactly this: a one-press action that
     does the work for you. Two components doing one job with two values is
     how the meters went wrong, so this converges on the signed-off Go colour.
     The sizing and the disabled treatment below stay, they are this
     component's own and they are deliberate. */
  background: #178055;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border: 0;
  border-radius: 10px;
  padding: 6px 14px;
  white-space: nowrap;
}

.ts-generate-btn:hover:not(:disabled),
.ts-generate-btn:focus-visible:not(:disabled) {
  background: #178055;
  filter: brightness(0.92);
  color: #fff;
}

/* Stays visibly a button rather than fading to near-invisible, because its
   disabled state is informative: it means "give me something to work from",
   and the title attribute says so. */
.ts-generate-btn:disabled {
  background: #C7D9CE;
  color: #4A5C51;
  cursor: not-allowed;
}

/* Compose toolbar (TS-5140).
 *
 * Attaching an image or a video used to be two form fields below the box,
 * which made them read as settings rather than as part of the post. They now
 * sit on the box itself, the way every other composer does it.
 */
.ts-compose-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.ts-compose-tool {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 0;
  border-radius: 9px;
  background: var(--primary-light, #F2EEF8);
  color: var(--primary-color, #672c72);
  box-shadow: inset 0 0 0 1px var(--ca-ring, #A78BAE);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ts-compose-tool:hover,
.ts-compose-tool:focus-visible {
  background: #E7DEF2;
}

.ts-compose-tool .bi {
  font-size: 16px;
  line-height: 1;
}

/* The video picker needs to stay a searchable select, so it keeps its control
   rather than collapsing to an icon. Capped so it reads as one tool among
   several rather than dominating the row. */
.ts-compose-tool__video {
  flex: 1 1 auto;
  max-width: 260px;
}

/* Attachment tray. Names what is attached, which "No file chosen" never did,
   and puts removal next to the thing being removed. */
.ts-compose-attachments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.ts-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: var(--primary-light, #F2EEF8);
  font-size: 12.5px;
  color: var(--title, #3E2155);
}

/* min-width 0 lets a long filename truncate instead of stretching the chip. */
.ts-attachment__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-attachment__remove {
  border: 0;
  background: transparent;
  color: var(--paragraph, #6b6880);
  line-height: 1;
  padding: 2px;
  cursor: pointer;
  border-radius: 50%;
}

.ts-attachment__remove:hover,
.ts-attachment__remove:focus-visible {
  background: #fff;
  color: var(--ca-danger, #B42318);
}

.ts-attachment__error {
  font-size: 12.5px;
  color: var(--ca-danger, #B42318);
}

/* A tool with something attached reads as active, so the link button shows at
   a glance whether a link is set without opening the modal to find out. */
.ts-compose-tool.is-set {
  background: var(--primary-color, #672c72);
  color: #fff;
  box-shadow: none;
}

.ts-compose-tool.is-set:hover,
.ts-compose-tool.is-set:focus-visible {
  background: #5D2764;
  color: #fff;
}

/* Compose area height (TS-5140).
 *
 * The textarea starts at rows=1 and grows with its content, so an empty post
 * left the card a few lines tall with the rest of the column empty beneath it.
 * Writing is the main job on this page and the box should look like it.
 *
 * A floor rather than a fixed height: the auto-resize still grows it as you
 * type, this only stops it collapsing when there is nothing there yet.
 */
.post-preview .wrapper-preview .preview-text {
  min-height: 240px;
}

/* The preview side needs the same floor, otherwise switching to preview mode
   makes the card jump smaller. */
.post-preview .wrapper-preview {
  min-height: 240px;
}

/* Empty state for a selected day with nothing on it (TS-5166).
 *
 * Colours come from the house variables rather than literals so the AA repair
 * on the styling epic (--paragraph moves off #858B98) reaches this too.
 */
.ts-day-empty__lead {
  font-size: 14px;
  font-weight: 700;
  color: var(--title, #3e2155);
}

.ts-day-empty__hint {
  font-size: 13px;
  color: var(--paragraph);
}

/* Focus indication for the compose box (TS-5140).
 *
 * The textarea carries no border of its own and sits flush inside the card,
 * so the browser drew its default focus ring around the bare textarea: a
 * system-blue rectangle sitting inside the purple card, tracing an edge that
 * is not the one the user reads as the box.
 *
 * Moved onto the card with :focus-within, in the brand colour. The ring is
 * suppressed on the textarea only because it is now drawn by the parent, so
 * keyboard users still get an obvious focus target - do not drop the
 * :focus-within rule and leave the outline: none behind.
 */
.post-preview .wrapper-preview:focus-within {
  outline: 2px solid var(--primary-color, #672c72);
  outline-offset: 2px;
}

.post-preview .wrapper-preview .preview-text:focus,
.post-preview .wrapper-preview .preview-text:focus-visible {
  outline: none;
  box-shadow: none;
}