/* ChatFlow Stories view (#stories-view, design A). Needs tokens.css, components.css (rows,
   chips, folders, list states, dialog) and chrome.css (.cf-page) first. Page header (one
   primary: Schedule Story; New Folder), then the folders and the stories in no folder, each a
   card of shared rows: a media thumbnail, the caption with its status chip, then
   time · Image or Video · accounts. Colours come from tokens only, so night needs no rules here.
   Class names are st-* (and the shared fold-* / list-*) so the old night layer's .flow-list,
   .flow-card, .folder-card and .empty-state rules never reach this view.

   Status is a word on a chip in the colour language (COLOUR-TOKENS): Scheduled amber
   (.chip-warn: queued), Posting blue (.chip-info: its time has come), Posted green (.chip-ok:
   posted on every account), Failed, Unconfirmed and Not Posted red (.chip-bad); the accounts
   where it failed or is unconfirmed get a line each under the meta line (.st-result). Folders
   and the unfiled card are raised surfaces (.card, --shadow-card). */

/* The page frame of Settings: the header spans the page, the content stops at 1200px */
.st-page > :not(.page-head) { max-width: 1200px; }

/* ---------- Story rows (the shared .row) ---------- */
.st-row { gap: 12px; padding-left: 12px; }
.st-row[draggable="true"] { cursor: grab; }
.st-row[draggable="true"]:active { cursor: grabbing; }
.st-row .row-actions button { cursor: pointer; }
.st-row .row-title.is-empty { font-weight: var(--fw-regular); color: var(--ink-2); }
/* Per account, what went wrong (Telegram's reason), in the alert colour; it wraps, unlike the
   one-line meta above it */
.st-results { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-result {
  font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font);
  color: var(--bad);
  overflow-wrap: anywhere;
}

/* The media thumbnail: 36x48, the story's 9:16 frame cropped to its middle. A button that
   opens the media preview; a placeholder tile when there is no media to show. */
.st-thumb {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 48px;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--fill);
  color: var(--ink-2);
}
button.st-thumb { cursor: zoom-in; }
button.st-thumb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.st-thumb > img,
.st-thumb > video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A video carries a small play mark (the word Video is in the meta line). It sits on the media
   itself, so it keeps one dark disc in both themes. */
.st-thumb-play {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #FFFFFF;
}
.st-thumb-play > .ic { width: 10px; height: 10px; margin-left: 1px; }

/* The loading skeleton's thumbnail */
.st-page .list-skel-thumb { flex: none; width: 36px; height: 48px; border-radius: 6px; }
/* Touch: the thumbnail opens the preview, so it is 44px wide like every other touch target
   (the media is cropped to fill it); placeholders and the skeleton match, so captions align */
@media (pointer: coarse) {
  .st-row .st-thumb,
  .st-page .list-skel-thumb { width: 44px; }
}

/* ---------- Schedule Story and Edit Story ---------- */
.st-dialog { width: 460px; }
.st-req { font-weight: var(--fw-regular); color: var(--ink-2); }
/* busy while its request runs: it keeps focus, so aria-disabled rather than disabled */
.st-dialog .modal-btns button[aria-disabled="true"] { opacity: .5; cursor: progress; background-image: none; }
.st-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.st-fieldset > legend { padding: 0; margin: 0 0 6px; }
.st-fieldset .check-list { max-height: 148px; }
.st-fieldset .hint, .st-fieldset .field-error { margin-top: 6px; }

/* The media field: a real file input (visually hidden, focusable) and its label as the drop
   zone. Clicking or pressing the zone opens the file picker; a file can also be dropped on it. */
.st-file { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
.st-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  box-sizing: border-box;
  padding: 12px;
  border: 1.5px dashed var(--edge-field);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--ink);
  font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font);
  cursor: pointer;
}
.st-drop:hover { background: var(--hover); }
.st-file:focus-visible + .st-drop { outline: 2px solid var(--focus); outline-offset: 2px; }
.st-file[aria-invalid="true"] + .st-drop { border-color: var(--alert); }
.st-drop.is-drop-target { border-style: solid; border-color: var(--reply); background: var(--reply-tint); }
.st-drop > .ic { flex: none; color: var(--ink-2); }
.st-drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-drop-title { font-weight: var(--fw-semibold); color: var(--ink); overflow-wrap: anywhere; }
.st-drop-sub { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-2); }
/* With a file chosen, the zone shows it: a 48x64 preview, the name and size */
.st-drop .st-thumb { width: 48px; height: 64px; cursor: pointer; }
.st-drop-change { margin-left: auto; flex: none; color: var(--reply); font-weight: var(--fw-semibold); }

/* The media of a story being edited: shown, not changed here */
.st-media-line { display: flex; align-items: center; gap: 12px; }
.st-media-line .st-thumb { width: 48px; height: 64px; }
.st-media-line .hint { flex: 1; min-width: 0; }

/* ---------- The date picker (flatpickr, only used here) on tokens ----------
   It opens below its field, or above when there is no room, placed against the window
   (position: fixed, set by the view's script), so the dialog's scrolling body never cuts it. */
/* flatpickr wraps the field: a date and a time need no more than this width */
.st-dialog .flatpickr-wrapper { display: block; width: 220px; max-width: 100%; }
.st-dialog .flatpickr-wrapper .input { cursor: pointer; }
.st-dialog.modal-box .flatpickr-calendar {
  width: 308px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--pop);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  font-family: var(--font);
}
.st-dialog.modal-box .flatpickr-calendar::before,
.st-dialog.modal-box .flatpickr-calendar::after { display: none; }
.st-dialog.modal-box .flatpickr-months .flatpickr-month,
.st-dialog.modal-box .flatpickr-months .flatpickr-prev-month,
.st-dialog.modal-box .flatpickr-months .flatpickr-next-month { color: var(--ink); fill: var(--ink); }
.st-dialog.modal-box .flatpickr-months .flatpickr-prev-month:hover svg,
.st-dialog.modal-box .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--reply); }
/* Month and year are 28px controls (44 on touch), centred in the month bar */
.st-dialog.modal-box .flatpickr-current-month { display: flex; align-items: center; justify-content: center; gap: 2px; height: 100%; padding: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.st-dialog.modal-box .flatpickr-current-month .numInputWrapper { height: var(--control-h-sm); }
.st-dialog.modal-box .flatpickr-current-month .flatpickr-monthDropdown-months,
.st-dialog.modal-box .flatpickr-current-month input.cur-year {
  height: var(--control-h-sm);
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: inherit;
}
.st-dialog.modal-box .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.st-dialog.modal-box .flatpickr-current-month input.cur-year:hover { background: var(--fill); }
.st-dialog.modal-box .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--pop); color: var(--ink); }
.st-dialog.modal-box .numInputWrapper:hover { background: var(--fill); }
.st-dialog.modal-box .numInputWrapper span:hover { background: var(--hover); }
.st-dialog.modal-box .flatpickr-current-month .numInputWrapper span.arrowUp::after,
.st-dialog.modal-box .flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: var(--ink-2); }
.st-dialog.modal-box .flatpickr-current-month .numInputWrapper span.arrowDown::after,
.st-dialog.modal-box .flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: var(--ink-2); }
.st-dialog.modal-box span.flatpickr-weekday { color: var(--ink-2); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.st-dialog.modal-box span.flatpickr-day,
.st-dialog.modal-box span.flatpickr-day.prevMonthDay,
.st-dialog.modal-box span.flatpickr-day.nextMonthDay { border-color: var(--line); border-right-color: transparent; color: var(--ink); font-size: var(--fs-label); }
.st-dialog.modal-box span.flatpickr-day:nth-child(n+8) { border-top-color: transparent; }
.st-dialog.modal-box span.flatpickr-day.prevMonthDay,
.st-dialog.modal-box span.flatpickr-day.nextMonthDay,
.st-dialog.modal-box span.flatpickr-day.flatpickr-disabled { color: var(--ink-2); }
.st-dialog.modal-box span.flatpickr-day:hover,
.st-dialog.modal-box span.flatpickr-day:focus { background: var(--fill); border-color: var(--line); color: var(--ink); outline: none; }
.st-dialog.modal-box span.flatpickr-day:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.st-dialog.modal-box span.flatpickr-day.today:not(.selected) { border-bottom-color: var(--line); font-weight: var(--fw-semibold); }
.st-dialog.modal-box span.flatpickr-day.today:hover,
.st-dialog.modal-box span.flatpickr-day.today:focus { background: var(--fill); border-color: var(--line); color: var(--ink); }
.st-dialog.modal-box span.flatpickr-day.selected,
.st-dialog.modal-box span.flatpickr-day.selected:hover,
.st-dialog.modal-box span.flatpickr-day.selected:focus { background: var(--reply); border-color: var(--reply); color: var(--on-reply); font-weight: var(--fw-semibold); }
.st-dialog.modal-box .flatpickr-time { border-top: 1px solid var(--line); }
.st-dialog.modal-box .flatpickr-time input,
.st-dialog.modal-box .flatpickr-time .flatpickr-time-separator { color: var(--ink); font-size: var(--fs-body); }
.st-dialog.modal-box .flatpickr-time input { border: 0; background: transparent; }
.st-dialog.modal-box .flatpickr-time input:hover,
.st-dialog.modal-box .flatpickr-time input:focus { background: var(--fill); }
/* Touch: 44px month bar, previous and next month buttons, day cells (the calendar is 308px
   wide, so each day is already 44 wide) and hour and minute fields. The spinner arrows stay
   small: the year, hour and minute also take typing. */
@media (pointer: coarse) {
  .st-dialog.modal-box .flatpickr-months .flatpickr-month { height: 44px; }
  .st-dialog.modal-box .flatpickr-months .flatpickr-prev-month,
  .st-dialog.modal-box .flatpickr-months .flatpickr-next-month { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }
  .st-dialog.modal-box span.flatpickr-day { height: 44px; line-height: 42px; }
  .st-dialog.modal-box .flatpickr-calendar.hasTime .flatpickr-time { height: 44px; max-height: 44px; line-height: 44px; }
  .st-dialog.modal-box .flatpickr-time .numInputWrapper,
  .st-dialog.modal-box .flatpickr-time input { height: 44px; }
}

/* ---------- The media preview ---------- */
.st-preview-dialog { width: 420px; }
.st-preview-media { display: flex; justify-content: center; border-radius: var(--radius-control); background: var(--fill); overflow: hidden; }
.st-preview-media > img,
.st-preview-media > video { display: block; max-width: 100%; max-height: min(60dvh, 560px); object-fit: contain; }
.st-preview-meta { margin: 12px 0 0; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); overflow-wrap: anywhere; }
.st-preview-dialog .modal-btns a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-h); box-sizing: border-box; padding: 0 14px; border-radius: var(--radius-control); background: var(--fill); color: var(--ink); font: var(--fw-semibold) var(--fs-label)/16px var(--font); text-decoration: none; }
.st-preview-dialog .modal-btns a:hover { background-image: linear-gradient(var(--press-overlay), var(--press-overlay)); }
.st-preview-dialog .modal-btns a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Phones: the title line wraps, the meta line wraps ---------- */
@media (max-width: 767px) {
  .st-row { align-items: flex-start; padding-right: 8px; }
  .st-row .row-title-line { flex-wrap: wrap; row-gap: 2px; }
  .st-row .row-title { white-space: normal; overflow-wrap: anywhere; }
  .st-row .row-meta { white-space: normal; overflow-wrap: anywhere; }
  .st-row .row-actions { gap: 4px; }
}