/* The CRM page: Marketing (js/marketing.js): the board of posts, one post, campaigns, the hold, and the Posts part
   of Settings. Loaded after file.css, before settings.css. Use the tokens of ws.css and app.css; never a raw color. */

/* ===== Marketing: the calendar of posts ===== */
/* Three columns of the board: Drafts, Approved, Posted. A post job that waits for Claude is a dashed slot in Drafts. */
.board.posts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.col-post-drafts { --c: var(--accent); }
.col-post-approved { --c: var(--s-proposal); }
.col-post-posted { --c: var(--s-won); }
.col-head .num { color: var(--muted); }
.pcard .bcard-msg { -webkit-line-clamp: 3; line-clamp: 3; }
.pcard .bcard-eyebrow { color: var(--muted); }
.pcard .bcard-foot { grid-template-columns: minmax(0, 1fr) auto; }
.pcard .bcard-due { font: 400 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; }
.pcard-meta { margin-top: 8px; color: var(--muted); font: 400 var(--t-xs) var(--sans); }
.pcard.is-slot { border-style: dashed; box-shadow: none; background: none; }
.pcard.is-slot .bcard-org, .pcard.is-slot .bcard-msg { color: var(--muted); }
.bcard-step.is-stop { color: var(--late); }
/* The hold: a quiet strip with a bar in the caution color, not an error. Its link goes to the one control, in Settings. */
.hold { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 3px 0 0 var(--caution); font: 400 var(--t-md) var(--sans); }
.hold > .icon { flex: none; color: var(--caution); }
.hold p { flex: 1; min-width: 0; color: var(--ink-2); }
.hold b { color: var(--ink); font-weight: 500; }
.hold .link { flex: none; font-weight: 500; white-space: nowrap; }
.sheet-body > .hold:first-child { margin-top: 20px; }

/* ===== Campaigns ===== */
.camp-sum { margin-top: 2px; }
.camp-list { display: grid; margin: 12px 0 0; padding: 0; list-style: none; }
.camp-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.camp-n { color: var(--muted); font: 500 var(--t-sm) var(--sans); font-variant-numeric: tabular-nums; }
.camp-post { display: grid; gap: 2px; color: var(--ink); text-decoration: none; }
.camp-post b { font: 500 var(--t-md) var(--sans); }
.camp-post .quiet { font: 400 var(--t-sm) var(--sans); }
.camp-post:hover b { text-decoration: underline; text-underline-offset: 3px; }
.seq-card .card-note { margin-top: 14px; }
.seq-card .card-note .link { font: 500 var(--t-sm) var(--sans); }
.seq-card > .sub { margin-top: 4px; }

/* ===== One post (the sheet) and the form of a post ===== */
.sheet-post .draft-why { margin-top: 8px; font: 400 var(--t-body) var(--sans); }
.sheet-post .draft-text { padding: 14px 16px 16px; font: 400 var(--t-body) var(--sans); }
.sheet-post .draft-row { padding: 0 16px; }
.sheet-post .kick-c { gap: 8px; }
/* The foot: why Approve waits, at the left, on one line; the actions stay on one line at the right. */
.sheet-post .sheet-foot .foot-note { flex: 1 1 auto; min-width: 0; }
.sheet-post .foot-actions { flex-wrap: nowrap; }
/* A line of the sheet that says what failed (an image that did not upload): the icon, then the words. */
.sheet-post .form-error:not(.is-strip):not(:empty) { display: flex; align-items: flex-start; gap: 6px; }
.sheet-post .form-error:not(.is-strip) .icon { flex: none; margin-top: 2px; }
.post-why { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 400 var(--t-sm) var(--sans); }
.post-why .icon { flex: none; }
/* The fields of a post: Topic, then pairs that line up (each field of a pair has the same top), then the captions. */
.post-form > .field:first-child { margin-top: 20px; }
.post-form .field-pair { margin-top: 16px; }
.post-form .field-pair > .field { margin-top: 0; }
.post-text { min-height: 144px; }
.post-text-x { min-height: 88px; }
.post-cap { margin-top: 20px; }
.post-count { color: var(--muted); font: 400 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; }
.post-mores { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
.post-mores .label { color: var(--muted); font: 400 var(--t-sm) var(--sans); }
.post-more { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--t-sm) var(--sans); }
.post-images .hint { margin-top: 2px; }
.post-images .field-err { margin-top: 8px; }
.post-images .label-row .link { font: 500 var(--t-sm) var(--sans); }
/* "Did you post it?" */
.post-ask { display: grid; gap: 8px; margin-top: 20px; padding: 16px; border: 1px solid var(--accent); border-radius: var(--r-lg); background: var(--accent-soft); }
.post-ask h3 { font: 600 var(--t-h3) var(--sans); }
.post-ask .sub { margin: 0; }
.post-ask .field-pair { margin-top: 4px; }
.post-ask .actions { margin-top: 4px; }
/* Where a post goes, the brand checks, the images, and a button for each platform. */
.pchecks { display: grid; gap: 8px; margin-top: 10px; padding: 0; list-style: none; }
.pchecks li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); font: 400 var(--t-sm) var(--sans); }
.pchecks .icon { flex: none; margin-top: 2px; }
.pchecks .is-stop { box-shadow: inset 3px 0 0 var(--late); }
.pchecks .is-stop .icon { color: var(--late); }
.pchecks .is-warn { box-shadow: inset 3px 0 0 var(--caution); }
.pchecks .is-warn .icon { color: var(--caution); }
.pchecks-ok { display: flex; align-items: center; gap: 8px; color: var(--good); }
.pimgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.pimgs:empty { display: none; }
.pimg { margin: 0; }
.pimg-pic { display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--tint); }
.pimg-pic img { width: 100%; height: 100%; object-fit: cover; }
.pimg-pic .quiet { padding: 8px; font: 400 var(--t-xs) var(--sans); text-align: center; overflow-wrap: anywhere; }
.pimg figcaption { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; font: 400 var(--t-xs) var(--sans); }
.pimg figcaption .mono { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.pshare { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.pshare .btn .icon { color: var(--good); }
.plinks { display: inline-flex; flex-wrap: wrap; gap: 14px; }
/* Import a campaign: the folder first, what it holds, then the name. */
.imp-pick { display: grid; justify-items: start; gap: 8px; margin-top: 20px; padding: 16px; border: 1px dashed var(--field-edge); border-radius: var(--r-lg); background: var(--sunken); }
.imp-found:empty { display: none; }
.imp-found { margin-top: 12px; }
.imp-found > .label { margin-bottom: 6px; }
.imp-list { display: grid; gap: 4px; margin: 0; padding-left: 20px; font: 400 var(--t-md) var(--sans); }
.imp-list b { font-weight: 500; }
.imp-found .imp-list + .field-err { margin-top: 10px; }
@media (max-width: 640px) { .pimgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== The Posts part of Settings ===== */
/* The days: the line of text, then the seven pills below it. */
.st-days { gap: 6px; }
.st-days .pill { min-width: 52px; justify-content: center; }
.st-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tag-x { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 10px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); font: 400 var(--t-sm) var(--sans); cursor: pointer; }
.tag-x .icon { color: var(--muted); }
.tag-x:hover { border-color: var(--line-2); }
.tag-x:hover .icon { color: var(--late); }
@media (max-width: 1099px) {
  .board.posts { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}
@media (max-width: 759px) {
  .head-actions { flex-wrap: wrap; gap: 12px; }
  .hold { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; row-gap: 6px; }
  .hold > .icon { margin-top: 2px; }
  .hold .link { grid-column: 2; justify-self: start; }
  .post-form .field-pair > .field + .field { margin-top: 16px; }
  /* Why Approve waits: the foot of a phone has no room at the left, so the reason gets its own line over the actions. */
  .sheet-post .sheet-foot { flex-wrap: wrap; row-gap: 8px; }
  .sheet-post .sheet-foot .foot-note { display: flex; flex: 1 1 100%; }
}
/* A touch screen: each control of Marketing (and of the Posts part of Settings) is a 44px tap target. Buttons and the day
   pills grow; links, page tabs and topic chips get a 44px tap area without moving the layout. */
@media (pointer: coarse) {
  .page-marketing .btn, .sheet-post .btn, .st-days .pill, .imp-pick .btn { min-height: 44px; }
  .page-marketing .link, .sheet-post .link, .hold .link { position: relative; }
  .page-marketing .link::after, .sheet-post .link::after, .hold .link::after { content: ""; position: absolute; inset: -14px -6px; }
  /* The tabs scroll on a phone, so a tap area outside them would be cut: each tab is 44px high, with the same space above. */
  .page-marketing .ptabs { margin-top: 12px; }
  .page-marketing .ptab { padding-top: 12px; }
  .st-topics { gap: 8px; }
  .tag-x { position: relative; height: 36px; }
  .tag-x::after { content: ""; position: absolute; inset: -4px 0; }
}