/* The review surfaces: week frame, day cards, post cards, workflow-state
   visual hierarchy, collapsed strips, panels, threads, carousel, desk,
   calendar and ideas. Ported from walk-v1; state names updated to the
   thirteen contract states through one mapping (visual.js). */

/* ----- Week frame ----- */
.frame {
  background: var(--bg-card, #fff);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent-week);
  border-radius: var(--radius);
  margin-bottom: 36px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.frame-header { padding: 26px 32px 22px; background: var(--bg-card, #fff); }
.frame-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
/* THE WEEK NUMBER, and it is not a whisper. Jay, 2026-08-14: "the 'W34' in the
   main card on 'My Review' that sits above the calendar dates has a font that
   is unusually small and incorrectly de-emphasizes the week." He was right and
   the numbers say so: 10.5px gray against a 26px title is the smallest type on
   the page carrying the one thing he navigates by. The dates stay the title,
   which is his 2026-08-14 naming ruling and is not being reversed, but the
   week it belongs to now reads as a label rather than as a caption. Held by a
   test, because the whole defect is a number nobody would notice sliding back
   down. */
.frame-eyebrow {
  font-family: var(--mono);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--accent-week);
  font-weight: 700;
  margin-bottom: 24px;
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent-week);
}
.frame-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  margin: 2px 0 0;
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--text);
  max-width: 50ch;
}
/* The one plain sentence under the dates: what this week actually is. It
   replaces a manufactured theme, so it must read as a sentence rather than as
   a headline. */
.frame-spend { margin: 4px 0 0; font-size: 13px; color: var(--text-3); }
.frame-lede {
  font-size: 14.5px; line-height: 1.5; color: var(--text-2);
  margin: 6px 0 0; max-width: 62ch;
}
.frame-sub { font-size: 13px; color: var(--text-3); margin-top: 8px; }
.frame-sub .cutoff { color: var(--text-2); }
/* The auto-refresh stamp (6.10): freshness is stated, never guessed at. */
.frame-sub .week-freshness { margin-left: 10px; color: var(--text-3); font-size: 12px; }

/* THE WEEK'S VERDICT, at the top of the week he is reading (Jay 2026-08-14).
   Reads as a statement when it states, and as a door when it counts work
   (Jay, 2026-09-01, clicking "1 waiting on you": "it does nothing when
   clicked on but should take the person to the content that needs to be
   addressed"). A needs-you chip is a button that lands on the first day
   still holding his work; every other verdict stays a plain statement. */
.week-verdict { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-left: 10px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px;
  background: var(--bg-soft); color: var(--text-2); }
.week-verdict b { font-weight: 650; }
.week-verdict .wv-why { font-weight: 400; color: var(--text-3); }
.week-verdict.is-clear     { background: var(--green-soft); color: var(--green); }
.week-verdict.is-clear .wv-why { color: var(--green); opacity: 0.85; }
.week-verdict.is-needs-you { background: var(--amber-soft); color: var(--amber); }
.week-verdict.is-needs-you .wv-why { color: var(--amber); opacity: 0.85; }
.week-verdict.is-hold      { background: var(--amber-soft); color: var(--amber); }
.week-verdict.is-late      { background: var(--red-soft); color: var(--red); }
.week-verdict.is-late .wv-why { color: var(--red); opacity: 0.85; }
.week-verdict.is-empty     { background: var(--accent-week-tint); color: var(--accent-week); }
.week-verdict.is-in-production { background: var(--accent-week-tint, #EEF2FF); color: var(--accent-week, #4338CA); }
button.week-verdict.is-clickable { border: 0; font: inherit; cursor: pointer; }
button.week-verdict.is-clickable:hover { filter: brightness(0.96); text-decoration: underline; }
@media (max-width: 620px) {
  .week-verdict { margin-left: 0; margin-top: 8px; }
}

/* ----- Filter by type and by voice -----
   Eighteen posts is more than anyone holds at once, and he reviews in runs:
   all the blogs, then the companions, then Katie's. Chips rather than a select,
   because a select on a phone opens a modal wheel for a two-tap choice.

   THE COLORS ARE THE CALENDAR'S. Jay, 2026-08-14: "filtering is not
   cosmetically acceptable and does not use the same consistent color codes as
   we do in our calendar view. Whenever possible we are trying to keep a
   cohesive user experience." A chip that filters to Katie's posts now carries
   the same color the calendar paints on Katie's cards, from one shared token,
   so the two screens cannot drift apart again. */
.filter-bar {
  display: grid; gap: 7px;
  margin: 16px 0 6px; padding: 12px 14px;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  --chip: var(--rule-strong);
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 12.5px; line-height: 1; font-weight: 500;
  padding: 9px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--bg); color: var(--text-2);
  /* A comfortable thumb target: the whole point is that he is on a phone. */
  min-height: 36px;
  transition: background .12s, color .12s, border-color .12s;
}
/* The dot is the calendar's left edge, made round. A chip that has the
   platform's own mark uses that instead: same idea, sharper. */
.filter-chip::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--chip); flex: 0 0 auto;
}
.filter-chip.has-icon::before { display: none; }
.filter-chip-icon {
  display: inline-flex; align-items: center; color: var(--chip); flex: 0 0 auto;
}
.filter-chip.sp-none .filter-chip-icon { color: var(--text-3); }
.filter-chip.is-on .filter-chip-icon { color: #fff; }
.filter-chip.sp-blog  { --chip: var(--sp-blog); }
.filter-chip.sp-jay   { --chip: var(--sp-jay); }
.filter-chip.sp-katie { --chip: var(--sp-katie); }
.filter-chip.sp-page  { --chip: var(--sp-page); }
.filter-chip.sp-none::before { display: none; }
.filter-chip:hover { color: var(--text); border-color: var(--rule-strong); }
.filter-chip.is-on {
  background: var(--chip); border-color: var(--chip);
  color: #fff; font-weight: 600;
}
.filter-chip.is-on::before { background: rgba(255,255,255,0.85); }
/* The neutral "all" chips have no surface of their own, so they settle on ink
   rather than borrowing a color that means something else. */
.filter-chip.sp-none.is-on { background: var(--text-1); border-color: var(--text-1); }
.filter-note { font-size: 12.5px; color: var(--text-3); margin: 3px 0 0; }
/* The bar SAYS it is a filter. Bare chip rows read as status, not as
   controls (Jay, 2026-08-25: the user cannot tell the options exist), so
   the shared bar leads with a funnel and a label, and each group is named. */
.fbar-head {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text-3);
}
.fbar-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fbar-group-label {
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
  min-width: 44px;
}
.filter-clear {
  font: inherit; font-size: 12.5px; background: none; border: 0; padding: 0;
  color: var(--accent-week, #00838C); cursor: pointer; text-decoration: underline;
}

/* ----- Review stepper (one-post-at-a-time navigation) ----- */
.review-stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 64ch; margin: 4px 0 14px; }
.review-stepper.is-bottom { margin-top: 16px; }
.rev-nav { font: inherit; font-size: 14px; font-weight: 600; color: var(--accent-week); background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 16px; cursor: pointer; }
.rev-nav:hover:not(:disabled) { background: var(--accent-week-tint); }
.rev-nav:disabled { opacity: 0.4; cursor: default; }
.rev-progress { font-size: 13px; color: var(--text-3); }
.rev-progress strong { color: var(--accent-week); font-size: 15px; }
.review-empty { max-width: 64ch; padding: 28px; text-align: center; color: var(--text-3); }

/* ----- Day card ----- */
.day {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent-week);
  border-radius: var(--radius);
  margin-bottom: 32px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.day-header { padding: 24px 32px 22px; border-bottom: 1px solid var(--rule); background: var(--bg-card); }
.day-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.day-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}
.day-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.008em;
  line-height: 1.15;
  margin: 2px 0 0;
}
.day-progress {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-3);
  font-family: var(--mono);
  letter-spacing: 0.4px;
}
.day-progress strong { color: var(--text-1); font-weight: 600; }
.day-progress.is-complete { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.day-progress.is-complete strong { color: var(--green); }

/* ----- Post card ----- */
.post {
  padding: 28px 32px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  border-left: 4px solid var(--border);
  /* A nav jump must land the whole card below the sticky app bar; without
     this, scrollIntoView tucks the card's first line (the owner's name and
     platform) under the bar (Safari report, 2026-08-28). Covers every
     scroll path: the jump hook, the anchor fallback, hash links. */
  scroll-margin-top: 72px;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.post:last-child { border-bottom: none; }
.post-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}
.post-meta {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  flex-wrap: wrap;
}
.post-meta .post-when { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.post-when .pw-day { font-weight: 700; color: var(--text-1); letter-spacing: 0.2px; }
.post-when .pw-rel { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-3); }
.post-when .pw-rel.is-soon { color: var(--accent-week, var(--accent)); }
.post-when .pw-time { color: var(--text-2); }
.post-when .pw-spend { color: var(--text-3); font-weight: 500; text-transform: none; letter-spacing: 0; }
.post-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--text);
  margin: 0 0 12px;
  max-width: 36ch;
}
.post-style-note {
  font-family: var(--sans);
  font-style: italic;
  font-size: 13.5px;
  color: var(--text-3);
  margin: -6px 0 14px;
  line-height: 1.4;
  max-width: 62ch;
}
.post-collapse-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
}
.post-collapse-btn:hover { background: var(--bg-soft, #FAFAF7); color: var(--text-1); }

/* Hero / artwork preview */
.post-hero {
  margin: 4px 0 16px;
  max-width: 64ch;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  position: relative;
}
.post-hero img { width: 100%; height: auto; display: block; }
.post-hero.is-square { max-width: 380px; }
.post-hero-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 6px 12px;
  background: var(--bg-tint);
  border-top: 1px solid var(--rule);
}
.post-media-state {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.4;
  max-width: 64ch;
}
.post-media-state strong { color: var(--text-2); }

/* The chosen artwork, inline with its post (D92: copy and image reviewed
   together). Feed squares stay modest; the blog hero spans the prose. */
.post-media-image {
  display: block;
  max-width: min(420px, 100%);
  border: 1px solid var(--rule);
  border-radius: 10px;
  margin: 4px 0 10px;
}
.post-media-image.is-hero {
  max-width: 100%;
  margin: 0 0 16px;
}

/* An attached video plays inline in review, at the shape it publishes in. */
.post-media-video {
  display: block;
  width: 100%;
  max-width: min(420px, 100%);
  background: #000;
  border: 1px solid var(--rule);
  border-radius: 10px;
  margin: 4px 0 10px;
}

/* Blog excerpt strip (D85 required preview field) */
.post-excerpt {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px 16px;
  background: var(--bg-tint);
  border-left: 2px solid var(--rule-strong);
  border-radius: 0 4px 4px 0;
  max-width: 64ch;
}
.post-excerpt .eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  flex-shrink: 0;
}
.post-excerpt .excerpt-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.5;
}
.post-excerpt .excerpt-text.is-missing { color: var(--red); font-style: normal; font-family: var(--sans); font-size: 13px; }

/* "What publishes": the customer-facing copy under review */
.post-body {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--text);
  margin: 0 0 18px;
  padding: 18px 22px;
  background: var(--bg-tint);
  border-left: 3px solid var(--rule-strong);
  border-radius: 0 4px 4px 0;
  position: relative;
  max-width: 64ch;
}
.post-body.is-text { white-space: pre-wrap; overflow-wrap: break-word; }
.post-body.is-html p { margin: 0 0 12px; }
.post-body.is-html p:last-child { margin-bottom: 0; }
.post-body.is-html h1 { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--text); margin: 0 0 12px; letter-spacing: -0.008em; line-height: 1.25; }
.post-body.is-html h2 { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--text); margin: 22px 0 10px; letter-spacing: -0.005em; }
.post-body.is-html h3 { font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--text); margin: 18px 0 8px; }
.post-body.is-html ul, .post-body.is-html ol { margin: 0 0 12px; padding-left: 22px; }
.post-body.is-html li { margin: 4px 0; }
.post-body.is-html a { color: var(--accent-week); text-decoration: underline; text-underline-offset: 2px; }
.post-body.is-html strong { color: var(--text); font-weight: 600; }
.post-body.is-html img { max-width: 100%; height: auto; border-radius: 4px; }
.post-body.is-html blockquote { margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 3px solid var(--accent-week-tint); color: var(--text-2); font-style: italic; }
.post-body.is-html pre { overflow-x: auto; background: var(--bg-soft); border-radius: 6px; padding: 10px 12px; font-family: var(--mono); font-size: 12.5px; }
.post-body.is-html table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13px; }
.post-body.is-html th, .post-body.is-html td { border: 1px solid var(--border, #d1d5db); padding: 7px 10px; text-align: left; vertical-align: top; }
.post-body.is-html th { font-weight: 600; color: var(--text); background: var(--bg-tint, #f7f7f5); }

/* Actions row */
.post-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.post-actions-info {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-3);
}

/* Expansion panel: needs-work ask, block reason, discuss note */
.post-panel {
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 14px;
  max-width: 64ch;
}
.post-panel-h { font-size: 12px; color: var(--text-3); margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.post-panel textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  line-height: 1.5;
}
.post-panel textarea:focus { outline: none; border-color: var(--accent); }
.post-panel-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }

/* Threads (comments + change requests) under the card */
.post-thread {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 64ch;
}
.post-thread-h { font-size: 12px; color: var(--text-3); margin-bottom: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.thread-row { padding: 8px 0; border-top: 1px solid var(--border); }
.thread-row:first-of-type { border-top: 0; padding-top: 0; }
.thread-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-3); margin-bottom: 4px; flex-wrap: wrap; }
.thread-author { font-weight: 600; }
.thread-row.is-jay .thread-author { color: var(--accent); }
.thread-row.is-katie .thread-author { color: #B26B00; }
.thread-resolved { color: var(--green); font-size: 11px; }
.thread-pending { color: var(--text-4); font-size: 11px; font-style: italic; }
.thread-body { font-size: 14px; line-height: 1.5; color: var(--text-1, #2A2620); white-space: pre-wrap; }
.thread-empty { color: var(--text-3); font-size: 12.5px; font-style: italic; }

/* The trail of edits behind one net diff (2026-08-24): folded shut, because
   "what does it say now" is the decision and "how did it get here" is a
   question you only sometimes have. */
.rev-trail { margin: 8px 0 0; padding-left: 20px; }
.rev-trail li { font-size: 13px; line-height: 1.5; margin-bottom: 8px; color: var(--text-2, #4A443C); }
.rev-trail-when { font-size: 12px; color: var(--text-3); }

/* The week day by day (/w/:n/sittings, 3w.46; reshaped on his 2026-08-24 feedback) */
.sit-reason {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: #FFF3E0; color: #B26B00; border: 1px solid #F0DCC0;
}
.sit-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.sit-filter-chip {
  font: inherit; font-size: 12.5px; padding: 5px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-tint);
  color: var(--text-2, #4A443C);
}
.sit-filter-chip.is-on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.sit-item.is-dimmed { opacity: 0.35; }
.sit-week-q {
  margin-top: 16px; padding: 14px 18px; max-width: 68ch;
  border: 1px solid #F0DCC0; border-radius: 12px; background: #FFFBF4;
}
.sit-week-q h2 { font-size: 16px; margin: 0 0 6px; }
.sit-week-q p { font-size: 13px; line-height: 1.55; color: var(--text-2, #4A443C); margin: 0; }
.sit-day-date { font-size: 12px; color: var(--text-3); font-weight: 400; margin-left: 8px; }
.sit-day-brief { font-size: 13px; line-height: 1.5; color: var(--text-2, #4A443C); margin: 2px 0 10px; }
.sit-focus { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.sit-focus.is-open { flex-direction: column; align-items: flex-start; }
.sit-focus-label { font-size: 12.5px; font-weight: 600; color: var(--text-2, #4A443C); }
.sit-focus-change {
  font: inherit; font-size: 12px; cursor: pointer; padding: 4px 10px;
  border: 1px dashed var(--border); border-radius: 999px;
  background: none; color: var(--text-3);
}
.sit-focus-change:hover { border-color: var(--accent); color: var(--accent); }
.sit-focus-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sit-focus-opt {
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 5px 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg, #fff);
}
.sit-focus-opt:hover { border-color: var(--accent); }
.sit-focus-opt.is-current { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* The week question as a decision: six options, one tap */
.sit-week-q.is-answered { border-color: var(--border); background: var(--bg-tint); }
.sit-week-q-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.sit-week-q-opt {
  font: inherit; text-align: left; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg, #fff);
}
.sit-week-q-opt:hover { border-color: var(--accent); }
.sit-week-q-opt:disabled { opacity: 0.6; cursor: default; }
.sit-week-q-opt-name { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 3px; }
.sit-week-q-opt-line { display: block; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.sit-week-q-err { color: #B26B00; font-size: 12px; }
.sit-week-q-because { font-size: 12.5px; line-height: 1.55; color: var(--text-3); margin: 8px 0 0; }
.sit-week-q-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sit-week-q-opt.is-current { border-color: var(--accent); }
.sit-focus-because { font-size: 12px; color: var(--text-3); }
.sit-focus-confirm { padding: 4px 14px; font-size: 12.5px; }

/* Mobile first (Jay, 2026-08-24: "renders elegantly on any device but is
   typically mobile first"). On a phone one card fills most of the viewport,
   so the swipe reads as a carousel; the snap point hardens so a flick lands
   ON a card instead of between two. */
@media (max-width: 520px) {
  .sit-items { scroll-snap-type: x mandatory; }
  .sit-item { width: 78vw; max-width: 320px; }
  .sit-head h1 { font-size: 22px; }
  .sit-card { padding: 14px; }
  .sit-week-q { padding: 12px 14px; }
}


.frame-actions { margin: 14px 0 6px; }
.sit-head { max-width: 68ch; }
.sit-head h1 { margin: 0 0 8px; }
.sit-lede { font-size: 15px; line-height: 1.6; color: var(--text-1, #2A2620); margin: 0 0 6px; }
.sit-cutoff { font-size: 13px; color: var(--text-3); margin: 0 0 4px; }
.sittings { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.sit-card {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg, #fff);
  max-width: 68ch;
}
.sit-card.is-settled { opacity: 0.62; }
.sit-ordinal {
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.sit-card.is-settled .sit-ordinal { color: var(--green, #2E7D32); }
.sit-q { font-size: 18px; line-height: 1.4; margin: 0 0 8px; }
.sit-why { font-size: 13px; line-height: 1.55; color: var(--text-3); margin: 0 0 12px; }
/* The day's posts as a swipe row (Jay, 2026-08-24: "swipe through the cards
   from left to right"). Native scroll-snap: a swipe on the phone, a trackpad
   scroll on the desktop, no carousel machinery to break. */
.sit-items {
  display: flex; flex-wrap: nowrap; gap: 10px; margin-bottom: 14px;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; padding-bottom: 6px;
}
.sit-item {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  width: 224px; padding: 14px 15px; text-align: left;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg, #fff); font: inherit; font-size: 13px; cursor: pointer;
  color: var(--text-1, #2A2620);
  box-shadow: 0 1px 2px rgba(42, 38, 32, 0.05), 0 3px 10px rgba(42, 38, 32, 0.05);
  transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
}
.sit-item:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 4px rgba(42, 38, 32, 0.07), 0 8px 20px rgba(42, 38, 32, 0.08);
  transform: translateY(-1px);
}
.sit-item-head { display: flex; align-items: center; gap: 8px; }
.sit-ch-icon { width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
img.sit-ch-icon { object-fit: cover; }
.sit-ch-car { color: var(--text-3); }
.sit-item.is-settled { opacity: 0.55; }
.sit-item-key { font-weight: 600; }
.sit-item-title {
  font-size: 12.5px; line-height: 1.4; color: var(--text-2, #4A443C);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sit-item-meta { color: var(--text-3); font-size: 12px; }
.sit-item-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sit-start { margin-top: 2px; }
.sit-done { font-size: 13px; color: var(--text-3); margin: 0; font-style: italic; }

/* A DECIDED DAY, CLOSED. One line the eye passes over on its way to the work
   (Jay, 2026-09-07: "I really just want it gone... I'm trying to force the
   user to be guided into getting the next things done"). It stays reachable:
   the whole row is the button that opens it. */
.sit-card.is-closed { padding: 0; opacity: 1; border-color: var(--border); background: transparent; }
.sit-closed-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: 0; border-radius: 12px; background: transparent;
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  color: var(--text-3);
}
.sit-closed-row:hover { background: var(--bg-2, rgba(42, 38, 32, 0.04)); color: var(--text-2, #4A443C); }
.sit-closed-tick { color: var(--green, #2E7D32); font-weight: 700; flex: 0 0 auto; }
.sit-closed-day { font-weight: 600; color: var(--text-2, #4A443C); }
.sit-closed-count { color: var(--text-3); }
.sit-closed-open { margin-left: auto; color: var(--accent); font-weight: 600; }
/* The next action, at the top, before any description of the week. */
.sit-next { margin-top: 10px; font-size: 14px; padding: 10px 16px; }
/* Week context, below the work, opening on his click. */
.sit-context { margin-top: 26px; max-width: 68ch; }
.sit-context > summary {
  cursor: pointer; font-size: 13px; color: var(--text-3);
  padding: 8px 0; list-style: none; user-select: none;
}
.sit-context > summary::-webkit-details-marker { display: none; }
.sit-context > summary::before { content: '▸ '; color: var(--text-3); }
.sit-context[open] > summary::before { content: '▾ '; }
.sit-context > summary:hover { color: var(--text-2, #4A443C); }
.sit-filter-note { font-size: 13px; color: var(--text-2, #4A443C); margin: 10px 0 0; }
.sit-foot { font-size: 12.5px; color: var(--text-3); margin-top: 18px; max-width: 68ch; }
.sit-foot.sit-warn { color: #B26B00; font-weight: 600; }
.sit-escape { margin-top: 14px; }

/* The day review (/w/:n/d/:day): the week page's own feel, scoped to a day.
   Day tabs keep the whole week within reach; each carries its live "still
   needs you" count, so picking the next day never means leaving the page. */
.day-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; align-items: center; }
.day-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; padding: 5px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-tint);
  color: var(--text-2, #4A443C);
}
.day-tab.is-on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.day-tab.is-done .day-tab-count { color: var(--green, #2E7D32); }
.day-tab-count { font-weight: 700; font-size: 11.5px; }
.day-tab-exit { border-style: dashed; color: var(--text-3); }
.day-tab-exit:hover { border-color: var(--accent); color: var(--accent); }
.day-foot-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* The MIX, taught not confirmed (ruling mixed-strategy-is-taught-not-confirmed):
   the modes a day's or week's posts declare, as quiet counters. */
.sit-mix, .day-mix { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.day-mix { margin: 10px 0 0; }
.mix-chip {
  font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
  background: var(--bg-tint); border: 1px solid var(--border);
  color: var(--text-2, #4A443C);
}
.mix-chip b { font-weight: 700; }
.mix-tag {
  font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
  background: none; border: 1px solid var(--border); color: var(--text-3);
}

/* The reply box: a remark, not a change request (3w.46) */
.thread-reply { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.thread-reply-field {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg, #fff);
  color: var(--text-1, #2A2620);
  resize: vertical;
}
.thread-reply-field:focus { outline: none; border-color: var(--accent); }
.thread-reply-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.thread-reply-status { font-size: 12px; color: var(--text-3); }

/* What we know about this post: preparation for a conversation, folded shut
   by default so it is never a wall to read before approving. */
.dossier {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 64ch;
}
.dossier > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.dossier-block { margin-top: 12px; }
.dossier-block:first-of-type { margin-top: 10px; }
.dossier-h { font-size: 12px; color: var(--text-3); font-weight: 600; margin-bottom: 6px; }
.dossier-line { display: flex; gap: 10px; font-size: 13px; line-height: 1.7; }
.dossier-label { color: var(--text-3); min-width: 9ch; }
.dossier ul { margin: 0; padding-left: 18px; }
.dossier li { font-size: 13px; line-height: 1.55; margin-bottom: 8px; color: var(--text-1, #2A2620); }
.dossier-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.dossier-warn .dossier-h { color: #B26B00; }

/* State explanation line under the chip (the honest "where you stand") */
.post-explain {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
  margin: -4px 0 12px;
  max-width: 64ch;
}
/* A decision of his that something we did afterwards undid. It reads a shade
   louder than the ordinary explanation because it is about his own work. */
.post-explain.is-voided {
  color: var(--text-2);
  border-left: 2px solid var(--rule);
  padding-left: 10px;
}

/* ============================================================
   Workflow-state visual hierarchy.
   Thirteen contract states map onto the old seven-color visual
   language through ONE function (visual.js visualStateFor). */
.post.is-state-pending          { border-left-color: var(--text-4, #B4ACA0); }
.post.is-state-approved-1       { border-left-color: var(--accent-week); background: var(--accent-week-tint); }
.post.is-state-ratified         { border-left-color: var(--green);       background: var(--green-soft); opacity: 0.78; }
.post.is-state-ratified:hover   { opacity: 1; }
.post.is-state-blocked          { border-left-color: var(--red);         background: var(--red-soft); }
.post.is-state-revision-ready   { border-left-color: var(--amber);       background: var(--amber-soft); }
.post.is-state-revision-info    { border-left-color: var(--text-3);      background: #FAFAF7; }
.post.is-state-rework-in-flight { border-left-color: var(--amber);       background: var(--amber-soft); }
.post.is-state-rework-in-flight::before {
  content: '';
  position: absolute; left: -4px; top: 0; bottom: 0; width: 4px;
  background: var(--amber);
  animation: rework-pulse 1.6s ease-in-out infinite;
}
@keyframes rework-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* The unified status chip: the single most prominent piece of workflow-state
   hierarchy on each card. WHO acted, WHAT the post needs next. */
.post-status-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.2px;
  max-width: 64ch;
}
.post-status-chip .icon { font-size: 14px; line-height: 1; }
.post-status-chip .sub  { font-weight: 400; color: var(--text-3); letter-spacing: 0; }
.post-status-chip.is-pending          { background: #fff; color: var(--text-2, #4A4540); border: 1px solid var(--border); }
.post-status-chip.is-approved-1       { background: var(--accent-week); color: #fff; }
.post-status-chip.is-approved-1 .sub  { color: rgba(255,255,255,0.85); }
.post-status-chip.is-ratified         { background: var(--green); color: #fff; }
.post-status-chip.is-ratified .sub    { color: rgba(255,255,255,0.85); }
.post-status-chip.is-blocked          { background: var(--red); color: #fff; }
.post-status-chip.is-blocked .sub     { color: rgba(255,255,255,0.85); }
.post-status-chip.is-revision-ready   { background: var(--amber); color: #fff; }
.post-status-chip.is-revision-ready .sub { color: rgba(255,255,255,0.85); }
.post-status-chip.is-rework-in-flight { background: var(--amber-soft); color: #7A5A00; border: 1px solid #F4E2A0; }
.post-status-chip.is-revision-info    { background: #fff; color: var(--text-2); border: 1px solid var(--border); }
.post-status-chip .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  animation: rework-pulse 1.6s ease-in-out infinite;
}

/* "You are here" flash after a silent refresh */
@keyframes post-here-flash {
  0%   { box-shadow: 0 0 0 3px var(--accent-week), 0 0 0 6px rgba(0,131,140,0.18); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
.post.is-here-flash { animation: post-here-flash 1.6s ease-out; border-radius: 12px; }

/* "REVIEW NOW" emphasis on the reviewer's next pending target */
.post.is-active-review {
  box-shadow: 0 0 0 2px var(--accent-week), 0 4px 18px rgba(0, 131, 140, 0.14);
  position: relative;
  z-index: 1;
}
.post.is-active-review::after {
  content: 'REVIEW NOW';
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--accent-week);
  color: #fff;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 2px;
  pointer-events: none;
}
.post.is-collapsed.is-active-review::after { top: -8px; right: 110px; }

/* ----- Collapsed strip (compact queue row) ----- */
.post.is-collapsed {
  padding: 0;
  border-color: var(--border);
  background: var(--bg-soft, #FAFAF7);
  overflow: hidden;
}
.post.is-collapsed > *:not(.post-row) { display: none !important; }
.post.is-collapsed.is-state-ratified       { background: var(--green-soft); border-left-color: var(--green); }
.post.is-collapsed.is-state-blocked        { background: var(--red-soft);   border-left-color: var(--red); }
.post.is-collapsed.is-state-approved-1     { background: var(--accent-week-tint); border-left-color: var(--accent-week); }
.post.is-collapsed.is-state-revision-ready,
.post.is-collapsed.is-state-rework-in-flight { background: var(--amber-soft); border-left-color: var(--amber); }
.post-row {
  display: grid;
  grid-template-columns: 130px 1fr 130px auto 70px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-2);
}
.row-status { display: flex; flex-direction: column; gap: 3px; }
.row-status-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.row-status-pill.is-needs-review { background: #fff; color: var(--text-2); border: 1px solid var(--border); }
.row-status-pill.is-approved     { background: var(--accent-week); color: #fff; }
.row-status-pill.is-locked       { background: var(--green); color: #fff; }
.row-status-pill.is-blocked      { background: var(--red); color: #fff; }
.row-status-pill.is-working      { background: var(--amber); color: #fff; }
.row-status-sub { font-size: 10.5px; color: var(--text-3); line-height: 1.3; font-style: italic; }
.row-main { min-width: 0; }
.row-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.row-meta .tag-group { gap: 4px; }
.row-meta .ch-icon-tag { width: 22px; height: 18px; }
.row-meta .ch-icon-tag svg { width: 12px; height: 12px; }
.row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-marks { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.row-mark {
  font-size: 10px;
  color: var(--text-3);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  white-space: nowrap;
  font-family: var(--sans, -apple-system, sans-serif);
  font-weight: 600;
}
.row-mark.is-on { color: var(--green); border-color: var(--green); background: rgba(42, 140, 74, 0.06); }
.row-mark.is-blocked { color: var(--red); border-color: var(--red); background: rgba(220, 38, 38, 0.06); }
.row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.row-btn {
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.row-btn:hover { background: var(--text); color: #fff; border-color: var(--text); }
.row-btn:disabled { opacity: 0.5; cursor: default; background: var(--green-soft); color: var(--green); border-color: var(--green); }
.row-btn-approve:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: #fff; }
.row-btn-block:hover { background: var(--red); border-color: var(--red); color: #fff; }
.row-btn-comment:hover { background: var(--accent-week); border-color: var(--accent-week); color: #fff; }
.row-expand-btn {
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  background: transparent;
  color: var(--accent);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.row-expand-btn:hover { background: var(--accent-week-tint); border-color: var(--accent-week); color: var(--accent-week); }
@media (max-width: 1100px) {
  .post-row {
    grid-template-columns: 110px 1fr;
    grid-template-areas:
      'status main'
      'marks  actions'
      'expand expand';
    row-gap: 10px;
  }
  .row-status { grid-area: status; }
  .row-main { grid-area: main; }
  .row-marks { grid-area: marks; justify-content: flex-start; }
  .row-actions { grid-area: actions; justify-content: flex-end; }
  .row-expand-btn { grid-area: expand; justify-self: end; }
}

/* ----- Carousel viewer (LinkedIn-style, one big slide at a time) ----- */
.carousel { margin: 4px 0 18px; max-width: 100%; }
.post-carousel-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-3);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.car-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 9rem;
  background: var(--bg-card, #fff);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  touch-action: pan-y;
}
.car-slide { padding: 1.1rem 1rem 1.4rem; min-height: 9rem; display: grid; gap: 0.5rem; align-content: center; }
.car-slide h3 { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--text); }
.car-slide p { margin: 0; white-space: pre-wrap; font-size: 14.5px; line-height: 1.6; }
.car-slide img { max-width: 100%; border-radius: 6px; }
.car-slide .slide-n {
  position: absolute; top: 0.5rem; right: 0.7rem;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.6px;
  color: var(--text-3);
}
.car-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 10px; max-width: 480px; margin-left: auto; margin-right: auto; }
.car-nav .btn.small { min-height: 36px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.car-dots { display: flex; gap: 6px; justify-content: center; flex: 1; }
.car-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-4, #B4ACA0); border: 0; padding: 0; cursor: pointer;
  transition: background 0.12s, transform 0.12s;
}
.car-dots button:hover { transform: scale(1.2); }
.car-dots button[aria-current] { background: var(--accent-week); transform: scale(1.25); }
.car-thumbs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-top: 12px; scrollbar-width: thin; }
.car-thumbs button {
  flex: none; width: 56px; height: 70px;
  border: 2px solid transparent; border-radius: 3px;
  background: var(--bg-card); font-size: 8.5px; line-height: 1.25; overflow: hidden;
  padding: 3px; cursor: pointer; color: var(--text-3); text-align: left;
  outline: 1px solid var(--rule);
}
.car-thumbs button[aria-current] { border-color: var(--accent-week); color: var(--text); }

/* ----- Stage box (close the week) ----- */
.stage-box {
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius);
  border-left: 4px solid var(--accent-week);
  padding: 22px 26px; margin: 28px 0; display: grid; gap: 8px;
  box-shadow: var(--shadow-sm);
}
.stage-box h2 { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--text); }
.stage-box p { margin: 0; color: var(--text-3); font-size: 13.5px; }
/* The foot of a week when there is nothing to press. It states what happens on
 * its own, so it must not carry the weight of a panel that wants something:
 * no card, no accent bar, no shadow. Jay, 2026-08-14, on the button this
 * replaced: "do not make it seem like it is something I am supposed to have to
 * do... all design aspects should feel intuitive with low cognitive load". */
.stage-box.is-quiet {
  background: none; border: 0; border-left: 0; box-shadow: none;
  padding: 6px 0; margin: 22px 0 4px; gap: 4px;
}
.stage-box.is-quiet h2 { font-size: 15px; color: var(--text-3); }
.stage-box.is-quiet p { font-size: 13px; color: var(--text-4); max-width: 62ch; }

/* ----- Step up (fresh passkey touch) ----- */
.stepup {
  display: grid; gap: 0.5rem; margin: 14px 0 0; padding: 12px 14px;
  border: 1px solid var(--amber); background: var(--amber-soft); border-radius: 8px;
  max-width: 64ch;
}
.stepup p { margin: 0; color: #7A5A00; font-weight: 600; font-size: 13px; }
.stepup .row { display: flex; gap: 8px; flex-wrap: wrap; }

.notice {
  margin: 12px 0 0; padding: 10px 12px;
  border-radius: 8px; background: var(--red-soft); color: var(--red); font-size: 13px;
  max-width: 64ch;
}
.notice.plain { background: var(--bg-soft); color: var(--text-2); }

/* ----- My Desk (portal landing + week cards) ----- */
.desk { max-width: 780px; margin-left: auto; margin-right: auto; }
.portal-greet { margin: 4px 0 14px; }
.pg-hi { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-1, #1d1d1f); }
.pg-date { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.desk-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.stat-pill { font-size: 13px; color: var(--text-2, #4a4540); background: var(--bg-soft); border-radius: 999px; padding: 6px 14px; }
.stat-pill b { font-weight: 700; }
.stat-pill.is-need { background: #FFF4E0; color: #8a6d00; }
.stat-pill.is-block { background: var(--red-soft); color: var(--red); }
.stat-pill.is-done { background: #e6f4ea; color: #1c7a3a; }
.desk-group { margin-bottom: 26px; }
.desk-group-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; color: var(--text-3); margin: 0 0 10px; padding-left: 2px; }
.desk-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: #fff; border: 0.5px solid rgba(0,0,0,0.08); border-radius: 16px;
  padding: 15px 18px; margin-bottom: 10px; cursor: pointer; font: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform .14s ease, box-shadow .14s ease;
  color: inherit; text-decoration: none;
}
.desk-card:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); text-decoration: none; color: inherit; }
.desk-card:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.desk-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.desk-card-top { display: flex; align-items: center; gap: 6px 9px; flex-wrap: wrap; }
.desk-card-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-1, #1d1d1f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-card-when { font-size: 12px; color: var(--text-3); }
.desk-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 1px; }
.dd-badge { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--text-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dd-badge.dd-need   { background: var(--amber-soft); color: var(--amber); }
.dd-badge.dd-wait   { background: var(--accent-week-tint); color: var(--accent-week); }
.dd-badge.dd-done   { background: var(--green-soft); color: var(--green); }
.dd-badge.dd-block  { background: var(--red-soft); color: var(--red); }
/* The reason beside the verdict, quiet by design: the badge carries the answer
   and this carries the "what happens next" so a clear week is not merely
   silent. Wraps rather than truncating, because the sentence is the point. */
.dd-badge-why { font-size: 11.5px; color: var(--text-3); white-space: normal; }

/* "Why this image", on the image (Jay 2026-08-14). Sits over the top-right of
   the picture, small enough not to compete with it and large enough to be a
   real tap target on a phone, which is where he reviews. */
.post-hero { position: relative; }
/* The renderers' own images (file_refs off the item) get the same treatment:
   mountArtInfo wraps them so the button has a positioned box to sit in. */
.post-img-wrap { position: relative; display: block; }
.art-why-mount { position: absolute; top: 8px; right: 8px; z-index: 2; }
.art-why-btn { width: 26px; height: 26px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--serif, Georgia, serif); font-style: italic; font-weight: 700; font-size: 14px;
  line-height: 26px; padding: 0; color: #fff; background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.art-why-btn:hover { background: rgba(0, 0, 0, 0.72); }
.art-why-btn:focus-visible { outline: 2px solid var(--accent-week); outline-offset: 2px; }
.art-why-pop { position: absolute; top: 32px; right: 0; width: min(320px, 78vw); z-index: 3;
  background: var(--bg-1, #fff); color: var(--text-1); border: 1px solid var(--line, #e3ded6);
  border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); text-align: left; }
.art-why-pop[hidden] { display: none; }
.art-why-pop-h { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); }
.art-why-pop-dir { font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.art-why-pop-body { font-size: 13.5px; line-height: 1.5; margin: 6px 0 0; }
.art-why-pop-foot { font-size: 11.5px; color: var(--text-3); margin: 8px 0 0; }
.desk-card.dd-edge-need   { border-left: 3px solid var(--amber); }
.desk-card.dd-edge-wait   { border-left: 3px solid var(--accent-week); }
.desk-card.dd-edge-done   { border-left: 3px solid var(--green); }
.desk-card.dd-edge-block  { border-left: 3px solid var(--red); }
.desk-chevron { font-size: 22px; font-weight: 300; color: var(--text-4, #b0aaa0); flex-shrink: 0; }
.desk-clear {
  padding: 44px 28px; text-align: center; color: var(--text-3);
  background: #fff; border: 0.5px solid rgba(0,0,0,0.08); border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); line-height: 1.6; font-size: 15px;
}
.viewlinks { display: flex; gap: 1rem; font-size: 13px; }
.viewlinks a { color: var(--accent-week); }

/* My Desk v2 (2026-08-22): a narrow content-operations dashboard, not an
   inventory surface. Only founder to-dos and active social/outreach progress
   render here; Media, System, planning and history keep their own homes. */
.desk { max-width: 920px; }
.desk-head { display: grid; gap: 4px; margin: 4px 0 18px; }
.desk-head h1 { margin: 2px 0 0; font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--text); }
.desk-head p { max-width: 70ch; margin: 0; color: var(--text-3); font-size: 13px; line-height: 1.5; }
.desk-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; }
.desk-summary-card { display: grid; gap: 2px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.desk-summary-card.is-attention { border-left: 3px solid var(--amber); }
.desk-summary-card.is-clear { border-left: 3px solid var(--green); }
.desk-summary-value { font-size: 22px; line-height: 1.1; color: var(--text); }
.desk-summary-label { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.desk-summary-detail { font-size: 11.5px; color: var(--text-3); }
.desk-section { margin-bottom: 28px; }
.desk-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 9px; }
.desk-section-head h2 { margin: 0; font-size: 14px; color: var(--text); }
.desk-section-head > span { color: var(--text-3); font-size: 11.5px; }
.desk-todos { display: grid; gap: 8px; }
.desk-todo { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 12px; background: var(--bg-card); color: inherit; text-decoration: none; }
.desk-todo:hover, .desk-progress-card:hover { border-color: var(--accent-week); color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); }
.desk-todo-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.desk-todo-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.desk-todo-meta { color: var(--text-3); font-size: 11.5px; }
.desk-todo-title { overflow: hidden; color: var(--text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.desk-todo-why { color: var(--text-3); font-size: 12px; line-height: 1.4; }
.desk-todo-action { flex: 0 0 auto; padding: 6px 10px; border-radius: 8px; background: var(--accent-week-tint); color: var(--accent-week); font-size: 12px; font-weight: 700; }
.desk-progress-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.desk-progress-card { display: grid; gap: 7px; min-width: 0; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: inherit; text-decoration: none; }
.desk-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.desk-progress-title { min-width: 0; overflow: hidden; color: var(--text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.desk-progress-meta, .desk-progress-count { color: var(--text-3); font-size: 11.5px; }
.desk-progress-track { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: var(--border); }
.desk-progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent-week); }
.desk-rollup { margin-top: 2px; }
.desk-clear.compact { padding: 18px; border-radius: 12px; box-shadow: none; font-size: 13px; }
@media (max-width: 720px) {
  .desk-summary { grid-template-columns: 1fr; }
  .desk-progress-grid { grid-template-columns: 1fr; }
  .desk-section-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .desk-todo { align-items: flex-start; }
  .desk-todo-title { white-space: normal; }
}
@media (pointer: coarse) {
  .desk-todo, .desk-progress-card { min-height: 44px; }
  .desk-todo-action { padding: 9px 12px; }
}

/* ----- Calendar (day columns, old sp- palette) ----- */
.cal-wrap { max-width: 860px; margin: 0 auto; }
/* Days WRAP instead of forcing a sideways scroll strip: seven fixed-width
   columns inside an 860px page always overflowed on a laptop, which is the
   "unnatural scrolling" he named on 2026-08-25. Five weekdays share the
   first row; a weekend day that actually holds a post wraps below; on a
   phone each day takes the full width and the page scrolls the one way a
   page naturally does. */
.cal-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-bottom: 0.5rem; align-items: flex-start; }
.cal-day { flex: 1 1 150px; min-width: 150px; display: grid; gap: 0.5rem; align-content: start; }
@media (max-width: 560px) {
  .cal-day { flex-basis: 100%; }
}
.cal-weeknav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0; }
.chip-sm { font-size: 10.5px; padding: 2px 8px; min-height: 0; }
.cal-day-head {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--text-3);
  padding: 4px 0 6px; border-bottom: 1px solid var(--rule);
}
.cal-entry {
  display: grid; gap: 0.25rem; justify-items: start;
  background: #fff; border: 0.5px solid rgba(0,0,0,0.08); border-radius: 12px;
  border-left: 3px solid var(--rule-strong);
  padding: 0.6rem 0.7rem; text-decoration: none; color: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform .12s, box-shadow .12s;
}
.cal-entry:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,0,0,0.10); text-decoration: none; color: inherit; }
.cal-entry.sp-blog  { border-left-color: var(--sp-blog); }
.cal-entry.sp-jay   { border-left-color: var(--sp-jay); }
.cal-entry.sp-katie { border-left-color: var(--sp-katie); }
.cal-entry.sp-page  { border-left-color: var(--sp-page); }
.cal-entry .cal-slot { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.4px; color: var(--text-2); }
.cal-entry .cal-what { color: var(--text); font-size: 13.5px; font-weight: 600; }
.cal-empty { color: var(--text-4); font-size: 12.5px; padding: 0.4rem 0; font-style: italic; }
.cal-note { color: var(--text-3); font-size: 12.5px; margin-top: 12px; }

/* ----- Week header block reused on desk/calendar/ideas ----- */
.week-head { display: grid; gap: 0.35rem; padding: 0.25rem 0 0.75rem; }
.week-head h1 {
  font-family: var(--serif);
  font-size: 26px; font-weight: 700; letter-spacing: -0.008em;
  margin: 0; color: var(--text); line-height: 1.18;
}
.week-head .theme { color: var(--text-3); font-family: var(--serif); font-style: italic; font-size: 15px; }
.week-head .cutoff { font-size: 12.5px; color: var(--text-3); font-family: var(--mono); letter-spacing: 0.3px; }

/* ----- Ideas (rounded cards in the old desk language) ----- */
.idea-submit {
  background: #fff; border: 0.5px solid rgba(0,0,0,0.08); border-radius: 18px;
  padding: 18px 20px; margin: 0 0 28px; display: grid; gap: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.idea-submit h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-2); }
.idea-submit textarea, .idea-note-form textarea {
  width: 100%; min-height: 4rem; font: inherit; font-size: 14px; padding: 0.6rem;
  border: 1px solid var(--rule-strong); border-radius: 9px; background: #fff;
}
.idea-submit textarea:focus, .idea-note-form textarea:focus { outline: none; border-color: var(--accent-week); }
.idea-list { display: grid; gap: 0.75rem; max-width: 760px; }
.idea-card {
  background: #fff; border: 0.5px solid rgba(0,0,0,0.08); border-radius: 14px;
  padding: 15px 18px; display: grid; gap: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.idea-head { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.idea-head .idea-meta { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.idea-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-1, #1d1d1f); }
.idea-body { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.idea-disp { margin: 0; color: var(--text-3); font-size: 12.5px; }
.idea-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.idea-notes li { background: var(--bg-soft); border-radius: 10px; padding: 9px 12px; font-size: 13px; color: var(--text-2); }
.idea-note-form { display: grid; gap: 0.4rem; justify-items: start; }
.idea-status-row { display: flex; gap: 0.5rem; align-items: center; }
.idea-status-row label { color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.idea-status {
  font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--rule-strong);
  border-radius: 9px; background: #fff; color: var(--text-2); min-height: 40px; cursor: pointer;
}
.w-sub { color: var(--text-3); font-size: 12px; }
.h-meta { color: var(--text-4); font-size: 11px; margin-top: 2px; }

/* ----- History (item view) ----- */
.history { display: grid; gap: 0.75rem; margin-top: 1rem; max-width: 64ch; }
.history h2 {
  font-family: var(--mono);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-3); font-weight: 500; margin: 14px 0 0;
}
.history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.history li { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 8px; padding: 0.6rem 0.75rem; font-size: 13px; }
.history .empty { color: var(--text-3); font-size: 12.5px; font-style: italic; }

/* ----- The revision panel (item view) -----
   Added 2026-08-12: a revision used to arrive with no ask, no reason and no
   previous version, so comparing it meant remembering yesterday's post. */
.revision {
  background: var(--bg-card); border: 1px solid var(--rule);
  border-left: 3px solid var(--accent, #C8752B);
  border-radius: 8px; padding: 0.75rem 0.9rem; display: grid; gap: 0.6rem;
}
.revision h2 { margin: 0; }
.rev-block { display: grid; gap: 3px; }
/* Several changes stacked in one panel, all covered by one accept. The rules
   between them are what stop four asks reading as one run-on paragraph. */
.rev-one { display: grid; gap: 0.55rem; }
.rev-one + .rev-one { border-top: 1px solid var(--rule); padding-top: 0.7rem; }
.rev-ordinal {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--accent, #C8752B);
}
.rev-intro { font-size: 13px; line-height: 1.5; color: var(--text-2); margin: -2px 0 2px; }
.rev-label {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--text-3);
}
.rev-body { font-size: 13.5px; line-height: 1.5; }
/* Before/after for an artwork ask. Two up on anything wide enough, stacked on
   a phone, and never wider than the card: the panel exists to stop a founder
   scrolling, so it must not introduce a sideways scroll of its own. */
.rev-art { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
@media (min-width: 480px) { .rev-art { grid-template-columns: 1fr 1fr; } }
.rev-art-fig { margin: 0; display: grid; gap: 4px; }
.rev-art-fig img {
  display: block; width: 100%; max-width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--bg, #FBFAF7);
}
.rev-art-fig figcaption {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--text-3);
}
.rev-previous summary { font-size: 12.5px; color: var(--text-3); cursor: pointer; }
.rev-old {
  white-space: pre-wrap; font-size: 12.5px; line-height: 1.55;
  background: var(--bg, #FBFAF7); border: 1px solid var(--rule);
  border-radius: 6px; padding: 0.6rem 0.7rem; margin: 0.5rem 0 0;
  max-height: 40vh; overflow: auto; color: var(--text-2, inherit);
}

/* ----- Settings sheet (slide-up) ----- */
/* ----- A post opened over the calendar -----
   Jay, 2026-08-14: "Would be better if it was a popup style and could be easily
   closed once worked so the end user can stay inside the calendar mechanism
   rather than being forced into a different workflow. Some may choose to just
   use the calendar as the picker." Full width on a phone, a centered panel on a
   desk, and the calendar keeps its scroll position underneath either way. */
.item-sheet {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(20, 18, 15, 0.38);
  display: flex; align-items: flex-end; justify-content: center;
  animation: sheetFade .18s ease;
}
.item-sheet[hidden] { display: none; }
.item-sheet-panel {
  width: min(760px, 100%); max-height: 92vh;
  background: var(--bg, #FBFAF7);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.22);
  display: flex; flex-direction: column;
  animation: sheetUp .24s cubic-bezier(.22,1,.36,1);
}
@media (min-width: 720px) {
  .item-sheet { align-items: center; padding: 24px; }
  .item-sheet-panel { border-radius: 16px; max-height: 88vh; }
}
.item-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--rule); flex: 0 0 auto;
}
.item-sheet-when { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.item-sheet-actions { display: flex; align-items: center; gap: 10px; }
.item-sheet-full { font-size: 12.5px; color: var(--text-3); }
.item-sheet-close {
  font: inherit; font-size: 14px; font-weight: 700; color: var(--text-3);
  background: var(--bg-soft); border: none; border-radius: 999px;
  width: 34px; height: 34px; cursor: pointer;
}
.item-sheet-close:hover { color: var(--text); }
.item-sheet-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 14px calc(24px + env(safe-area-inset-bottom, 0px));
}
/* The page behind a sheet must not scroll under the thumb. */
body.has-sheet { overflow: hidden; }

.sheet-backdrop { position: fixed; inset: 0; background: rgba(20, 18, 15, 0.35); backdrop-filter: blur(2px); z-index: 60; animation: sheetFade .18s ease; }
.settings-sheet {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: min(560px, 100%); max-height: 86vh;
  background: var(--bg, #FBFAF7);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.22);
  z-index: 61; display: flex; flex-direction: column;
  animation: sheetUp .24s cubic-bezier(.22,1,.36,1);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 10px; border-bottom: 1px solid var(--rule); }
.sheet-title { font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.sheet-close { font: inherit; font-size: 14px; font-weight: 700; color: var(--text-3); background: var(--bg-soft); border: none; border-radius: 999px; width: 30px; height: 30px; cursor: pointer; }
.sheet-close:hover { color: var(--text-1, #1d1d1f); }
.sheet-body { overflow-y: auto; padding: 14px 20px calc(26px + env(safe-area-inset-bottom, 0px)); }
.set-card { background: #fff; border: 0.5px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.set-lbl { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; display: block; color: var(--text-1, #1d1d1f); }
.set-sub { font-size: 11.5px; font-weight: 400; color: var(--text-4); display: block; margin-top: 2px; }
.set-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.set-select { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--rule-strong); border-radius: 9px; background: #fff; color: var(--text-2); cursor: pointer; }
/* A whole-row target, so the label and the box are one thumb-sized control on
 * a phone rather than a 16px checkbox somebody has to aim at. */
.set-toggle { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; cursor: pointer; font-size: 13px; color: var(--text-2); min-height: 40px; }
.set-toggle .set-check { width: 20px; height: 20px; accent-color: var(--accent-week); cursor: pointer; }
.set-toggle .set-sub { grid-column: 2; margin-top: 2px; }
@keyframes sheetUp { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }

/* ----- Phone pass: tighter cards, thumb targets ----- */
@media (max-width: 700px) {
  .desk, .cal-wrap { padding: 0 2px; }
  .desk-stats { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .stat-pill { flex-shrink: 0; }
  .desk-card { padding: 14px; border-radius: 14px; gap: 10px; }
  .pg-hi { font-size: 21px; }
}
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  .frame-header { padding: 18px 16px 14px; }
  .frame-title { font-size: 21px; line-height: 1.22; }
  .day-header { padding: 14px 14px; }
  .day-header .day-progress { margin-left: 0; margin-top: 6px; flex-wrap: wrap; row-gap: 4px; }
  .post { padding: 16px 14px; }
  .post-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      'status'
      'main'
      'marks'
      'actions'
      'expand';
    row-gap: 12px;
    padding: 14px 14px;
  }
  .row-status, .row-main, .row-marks, .row-actions, .row-expand-btn { grid-area: auto; }
  .row-actions { justify-content: stretch; flex-wrap: wrap; }
  .row-actions .row-btn,
  .row-expand-btn { flex: 1 1 auto; min-height: 40px; padding: 10px 12px; font-size: 13px; }
  .row-marks { justify-content: flex-start; }
  .row-title { white-space: normal; }
  .frame-header-top { gap: 10px; }
  .post-body { padding: 14px 14px; }
}
@media (max-width: 380px) {
  .frame-header { padding: 16px 12px 12px; }
  .frame-title { font-size: 19px; }
  .post { padding: 14px 12px; }
}

/* ----- Links in this post -------------------------------------------------
   What each link will be on publication day. Sits BELOW the published render,
   never inside it, so the post itself stays exactly what publishes (D92). */
.post-links {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 64ch;
}
.post-links-h { font-size: 12px; color: var(--text-3); margin-bottom: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.post-links-list { list-style: none; margin: 0; padding: 0; }
.post-link-row { padding: 8px 0; border-top: 1px solid var(--border); }
.post-link-row:first-child { border-top: 0; padding-top: 0; }
.post-link-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
}
.post-link-chip.is-ok      { background: var(--green-soft); color: var(--green); }
.post-link-chip.is-pending { background: var(--amber-soft); color: #7A5A00; }
.post-link-chip.is-bad     { background: var(--red-soft);   color: var(--red); }
.post-link-target {
  font-family: var(--mono);
  font-size: 12px;
  word-break: break-all;
  color: var(--accent);
}
.post-link-note { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin-top: 4px; }
.post-link-row.is-bad .post-link-note { color: var(--red); }

/* A not-yet-live internal link inside the body: the copy is untouched, but the
   click is routed to our own page for the target rather than to the 404. */
.post-body a[data-link-state="publishes_with_this_week"] { border-bottom: 1px dashed var(--amber); }
.post-body a[data-link-state="unresolved"] { color: var(--red); border-bottom: 1px dashed var(--red); }

/* ----- Why this image -----------------------------------------------------
   The art stage's own reasoning, which the card used to withhold. */
.post-artwork {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 64ch;
}
.post-artwork-h { font-size: 12px; color: var(--text-3); margin-bottom: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }

/* "Why it is written this way" (3f.1): same box language as the artwork panel,
   so the two reasons read as one family. */
.post-copy-why {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 64ch;
}
.post-copy-why-h { font-size: 12px; color: var(--text-3); margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.post-copy-why-body { font-size: 13.5px; line-height: 1.5; margin: 0; white-space: pre-wrap; }
.post-copy-why-body.is-missing { color: var(--text-3); font-style: italic; }
.copy-why-repair { margin-top: 8px; }
.copy-why-repair > summary { font-size: 12.5px; color: var(--accent); cursor: pointer; }
.copy-why-repair > p { margin-top: 6px; }
.art-opt { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.art-opt:first-of-type { border-top: 0; padding-top: 0; }
.art-opt-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); flex: 0 0 auto; }
.art-opt-body { min-width: 0; }
.art-opt-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.art-opt-chip {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-3);
}
.art-opt-chip.is-chosen { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.art-opt-chip.is-out { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.art-opt-direction { font-size: 13px; font-weight: 600; color: var(--text-1, #2A2620); }
.art-opt-why { font-size: 13px; line-height: 1.55; color: var(--text-2, #4A443C); }
.art-opt-why.is-missing { font-style: italic; color: var(--text-3); }
.art-why-flag { font-size: 12px; color: var(--red); margin-top: 4px; }
.art-alternates { margin-top: 10px; }
.art-alternates > summary { font-size: 12.5px; color: var(--accent); cursor: pointer; }
.art-why-foot { font-size: 12.5px; color: var(--text-3); margin-top: 10px; font-style: italic; }

/* ----- The strategy for this week -----------------------------------------
   The war room's plan, in the header. Served at /frame since the endpoint was
   built and never rendered, so a founder reviewed eighteen posts without a
   statement of what the week was for. */
.wk-strategy {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.wk-strategy-h {
  font-size: 12px; color: var(--text-3); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px; cursor: pointer;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.wk-strat-rev { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-4); }
.wk-strat-warn {
  font-weight: 600; text-transform: none; letter-spacing: 0;
  background: var(--amber-soft); color: #7A5A00; padding: 2px 8px; border-radius: 999px;
}
.wk-strat-body-wrap { margin-top: 12px; max-width: 78ch; }
.wk-strat-block { padding: 10px 0; border-top: 1px solid var(--border); }
.wk-strat-block:first-child { border-top: 0; padding-top: 0; }
.wk-strat-label {
  font-size: 11px; color: var(--text-3); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px;
}
.wk-strat-body { font-size: 13.5px; line-height: 1.6; color: var(--text-2, #4A443C); white-space: pre-wrap; }
.wk-strat-days { list-style: none; margin: 0; padding: 0; }
.wk-strat-day { display: flex; gap: 10px; padding: 5px 0; flex-wrap: wrap; align-items: baseline; }
.wk-strat-dayname { font-size: 12px; font-weight: 700; color: var(--text-1, #2A2620); min-width: 78px; }
.wk-strat-daytheme { font-size: 13.5px; color: var(--text-2, #4A443C); }
.wk-strat-daytitle { font-size: 12.5px; color: var(--text-3); font-style: italic; }

/* ----- Mobile for the three panels added 2026-08-13 ------------------------
   Jay, 2026-08-13: "make sure things are mobile friendly and mobile first.
   Next round unlike the previous checks will be reviewed via my iPhone instead
   of desktop browser." These panels were built on a desktop-width assumption:
   a long URL in a monospace line and a 72px image thumbnail beside text both
   overflow a 390px viewport, and an overflowing review card is the same class
   of defect as a link that 404s, because he cannot read what he is judging. */
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  .post-links, .post-artwork, .wk-strategy { padding: 12px; border-radius: 12px; }

  /* A URL has no spaces, so it must be allowed to break anywhere or it pushes
     the whole card sideways. */
  .post-link-target { font-size: 11.5px; overflow-wrap: anywhere; word-break: break-word; }
  .post-link-chip { margin-bottom: 4px; }
  .post-link-row { padding: 10px 0; }
  /* Tapping a link target with a thumb needs a real target height. */
  .post-links-list a { display: inline-block; min-height: 32px; }

  /* Thumbnail above the reasoning rather than beside it: side by side leaves
     roughly 18 characters per line on a phone. */
  .art-opt { flex-direction: column; gap: 8px; }
  .art-opt-thumb { width: 100%; height: auto; max-height: 200px; object-fit: cover; }
  .art-opt-why { font-size: 13.5px; }
  .art-alternates > summary { min-height: 36px; display: flex; align-items: center; }

  .wk-strat-body-wrap { max-width: none; }
  .wk-strat-day { flex-direction: column; gap: 2px; padding: 8px 0; }
  .wk-strat-dayname { min-width: 0; }
  .wk-strategy-h { min-height: 36px; }
}

/* A block and its replacement point at each other (2026-08-25): the strip
   rides where the voided-approval note rides, because both answer the same
   founder question, which is "what happened to this and what do I do now". */
.post-explain.is-replacement {
  border-left: 3px solid var(--accent-week, #8a7ddc);
  padding-left: 10px;
}
.post-explain.is-replacement a { font-weight: 600; }

/* The concept pitch card (3w.49): the team's case and the two verbs. It
   borrows the strategy panel's vocabulary on purpose, so the pitch and the
   strategy read as one family rather than two competing panels. */
.pitch-card { border-left: 3px solid var(--amber-soft, #F4E3B2); }
.pitch-warn { color: #7A5A00; background: var(--amber-soft); padding: 4px 8px; border-radius: 6px; margin-top: 4px; }
.pitch-actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.pitch-redirect { margin-top: 10px; display: grid; gap: 8px; }
.pitch-note {
  width: 100%; max-width: 78ch; font: inherit; font-size: 13.5px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-1, #2A2620);
}
.pitch-status { font-size: 12.5px; color: var(--text-3); margin: 8px 0 0; min-height: 1em; }
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  .pitch-actions .btn { min-height: 40px; flex: 1 1 auto; }
}

/* The engine's own reasoning, folded away from the plain summary. */
.wk-strat-more { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.wk-strat-more > summary { font-size: 12.5px; color: var(--text-3); cursor: pointer; min-height: 32px; display: flex; align-items: center; }
/* An option whose picture was pruned off disk: say so, never an empty frame. */
.art-opt-gone {
  font-size: 12.5px; color: var(--text-3); font-style: italic;
  padding: 10px; background: var(--bg-card); border: 1px dashed var(--border); border-radius: 8px;
}

/* YouTube video card (2c.6): title, player, description, in the channel's
   own order. The title is the one piece of copy the player shows above the
   fold, so it is set like a heading, and a missing one is visibly a fault. */
.yt-post .yt-title { font-size: 1.15rem; line-height: 1.3; margin: 0 0 10px; }
.yt-post .yt-title.is-missing { color: var(--danger, #b42318); font-weight: 500; }
.yt-post .yt-description-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; margin: 14px 0 6px; }
.tag.is-youtube { background: #b91c1c; color: #fff; }


/* The changed sentences as they now read (2026-08-28): clean by default,
   the word-by-word comparison folded one tap away. */
.diff-now { margin: 8px 0 4px; }
.diff-now-line { margin: 0 0 8px; line-height: 1.5; }

/* Changed sentences marked INSIDE the post render (2026-08-28: "show the
   actual most recent version ... some sort of indicators that when clicked
   or hovered over, the user can get additional context"). Subtle on purpose:
   the article stays an article; the mark is a hint, not a highlighter. */
/* Visible on arrival, not archaeological (Jay, 2026-09-02: a revision card
   showed him no "green shading like I would have expected"). */
mark.sent-changed { background: rgba(40, 160, 90, 0.16); color: inherit;
  border-bottom: 2px solid rgba(40, 160, 90, 0.75); border-radius: 2px;
  cursor: pointer; padding: 0 1px; }
mark.sent-changed:hover, mark.sent-changed:focus-visible {
  background: rgba(40, 160, 90, 0.26); outline: none; }
.sent-changed-pop { display: block; margin: 6px 0 10px; padding: 8px 10px;
  background: #f6faf7; border: 1px solid rgba(40, 160, 90, 0.35);
  border-radius: 8px; font-size: 0.86rem; line-height: 1.45; }
.sent-changed-pop-line { display: block; }
.sent-changed-pop-line + .sent-changed-pop-line { margin-top: 4px; }

/* His card order (2026-08-28): banner, the post with inline marks, then the
   record folded. The banner is one calm line, not a panel. */
.post-explain.is-revision-banner { background: #f2f8f4; border: 1px solid rgba(40, 160, 90, 0.35);
  border-radius: 8px; padding: 8px 12px; }
/* The why-block: his ask and the answer, two calm lines above the revised
   copy (Jay, 2026-09-02: cause before effect; the full record stays folded
   below for history). */
.rev-why { margin: 6px 0 12px; padding: 9px 12px; border-left: 3px solid var(--amber, #B45309);
  background: var(--amber-soft, #FEF3C7); border-radius: 0 6px 6px 0; font-size: 0.9rem; line-height: 1.45; }
.rev-why-line + .rev-why-line { margin-top: 5px; }

/* Verdict rows pin to the viewport bottom while their card is on screen
   (Jay, 2026-09-02: "Buttons need to be near where the content is viewed
   and not require lots of scrolling to select."). Scoped by the containing
   card, so only the card under the reader's eye pins its row. */
.post-actions, .pitch-actions, .media-verdict-btns {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--bg, #FDFCFA);
  padding-top: 8px; padding-bottom: 8px;
  box-shadow: 0 -6px 12px -8px rgba(15, 23, 42, 0.25);
}

.rev-archive { margin: 14px 0 4px; }
.rev-archive > summary { cursor: pointer; font-size: 0.86rem; color: var(--muted, #667085);
  padding: 6px 0; }
.rev-archive[open] > summary { color: var(--text, #0F172A); }

/* AN ACTION THAT NEEDS A FOUNDER IS LOUD (Jay, 2026-09-02: "On a video that
   needs my approval, if its important why does it read like some sort of
   terms of service link. If you are not paying attention you would not even
   know that was there. Too non-memorable"). One class for every
   the-next-step-is-yours moment: banner ground, bold claim, a real button.
   Never body text, never an inline link. */
.post-action-callout {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 12px 14px;
  background: var(--amber-soft); border: 1px solid var(--amber);
  border-left: 5px solid var(--amber); border-radius: 10px;
}
.post-action-callout strong { flex: 1 1 24ch; font-size: 14.5px; color: var(--text); line-height: 1.45; }
.post-action-callout a.btn { text-decoration: none; }

/* THE FOCUSED CUT REVIEW (Jay, 2026-09-02 22:48): "I am given just the video
   I want and in a way that allows me to not only review the video but also
   make updates". One sheet over the page he is on, holding one board's
   panel, the same one the Media page draws. Full-screen on a phone. */
.cut-focus { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; background: rgba(15, 23, 42, 0.55); overflow-y: auto; }
.cut-focus-sheet { width: min(980px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); }
.cut-focus-head { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.cut-focus-title { font-size: 15px; }
.cut-focus-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cut-focus-body { padding: 8px 16px 20px; }
.cut-focus-body .media-board { border: 0; padding: 0; margin: 0; }
body.has-cut-focus { overflow: hidden; }
@media (max-width: 720px) {
  .cut-focus { padding: 0; }
  .cut-focus-sheet { width: 100%; max-height: 100vh; border-radius: 0; border: 0; }
}

/* SIMPLE WHILE POWERFUL (Jay, 2026-09-02 ~22:55, on the first sheet: "its too
   overwhelming.... This is horrible for cognitive load"). The sheet is one
   screen: chips, the video, the decision. The power sits behind two folds. */
.cut-focus-panel { display: grid; gap: 14px; }
.cut-focus-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cut-focus-meta { color: var(--text-3); font-size: 12.5px; }
.cut-focus-panel .media-preview { width: 100%; max-height: 62vh; background: #000; border-radius: 10px; }
.cut-focus-what { margin: -6px 0 0; color: var(--text-3); font-size: 12.5px; }
.cut-focus-verdict { margin: 0; }
.cut-focus-step { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.cut-focus-step span { color: var(--text-3); font-size: 13px; }
.cut-focus-fold > summary { cursor: pointer; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-weight: 600; }
.cut-focus-fold[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cut-focus-fold > .media-compare-body { padding: 10px 12px 12px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 10px 10px; }
.cut-focus-tools { align-items: center; margin-bottom: 8px; }
.cut-focus-scenes { display: grid; gap: 6px; }
.cut-focus-scene > summary { cursor: pointer; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; }
.cut-focus-scene[open] > summary { font-weight: 600; }

/* THE STORYBOARD STAGE (Jay, 2026-09-02 ~23:0x: "the 'Canva' style editor
   where I am able to build WYSIWYG"). Pages across the top, the selected page
   on a stage the shape of the cut, words editable in place, clips swapped by
   click. The stage approximates the render; the preview above is the truth. */
.sb { display: grid; gap: 12px; }
.sb-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scroll-snap-type: x proximity; }
.sb-page { position: relative; flex: 0 0 96px; height: 64px; padding: 0; border: 2px solid var(--border); border-radius: 8px; overflow: hidden; background: #111; color: #fff; cursor: pointer; scroll-snap-align: start; text-align: left; }
.sb-page.is-active { border-color: var(--accent-week); box-shadow: 0 0 0 2px var(--accent-week-tint); }
.sb-page.is-card { background: #0F172A; }
.sb-page img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.sb-page-words { position: absolute; left: 6px; right: 6px; top: 6px; font-size: 10px; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.sb-page-n { position: absolute; left: 6px; bottom: 4px; font-size: 10px; opacity: 0.9; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.sb-page-flag { position: absolute; right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 6px; background: var(--amber); color: #111; font-size: 9px; font-weight: 700; }
.sb-page-flag.is-note { background: var(--accent-week); color: #fff; }
.sb-main { display: grid; gap: 10px; }
.sb-page-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sb-hint { color: var(--text-3); font-size: 12.5px; }
.sb-stage { position: relative; margin: 0 auto; background: #000; border-radius: 10px; overflow: hidden; }
.sb-stage.is-wide { width: 100%; max-width: 720px; aspect-ratio: 16 / 9; }
.sb-stage.is-tall { width: min(100%, 320px); aspect-ratio: 9 / 16; }
.sb-stage.is-card { background: #0F172A; }
.sb-stage-video, .sb-stage-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.sb-stage-slate { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; color: #cbd5e1; font-size: 13px; text-align: center; }
.sb-text { position: absolute; left: 6%; right: 6%; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.85); outline: none; cursor: text; border-radius: 6px; padding: 4px 6px; }
.sb-text:hover, .sb-text:focus { background: rgba(0,0,0,0.35); box-shadow: 0 0 0 2px rgba(255,255,255,0.7); }
.sb-text:empty::before { content: attr(data-placeholder); opacity: 0.55; }
.sb-words { top: 50%; transform: translateY(-50%); text-align: center; font-size: clamp(16px, 3.2vw, 30px); font-weight: 800; line-height: 1.15; }
.sb-stage.is-tall .sb-words { font-size: clamp(16px, 5.5vw, 26px); }
.sb-caption { bottom: 8%; text-align: center; font-size: clamp(12px, 1.8vw, 16px); font-weight: 600; }
.sb-cta { bottom: 22%; text-align: center; font-size: clamp(13px, 2vw, 18px); font-weight: 700; }
.sb-url { bottom: 9%; text-align: center; font-size: clamp(11px, 1.6vw, 14px); letter-spacing: 0.04em; }
.sb-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sb-secs-ctl { display: flex; align-items: center; gap: 6px; }
.sb-secs { min-width: 34px; text-align: center; font-weight: 700; }
.sb-note { flex: 1 1 240px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.sb-tray { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; }
.sb-clip { position: relative; flex: 0 0 120px; height: 72px; padding: 0; border: 2px solid var(--border); border-radius: 8px; overflow: hidden; background: #111; cursor: pointer; }
.sb-clip.is-in-use { border-color: var(--green); cursor: default; }
.sb-clip img { width: 100%; height: 100%; object-fit: cover; }
.sb-clip-blank { display: grid; place-items: center; height: 100%; color: #94a3b8; font-size: 11px; }
.sb-clip-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; background: rgba(0,0,0,0.6); color: #fff; font-size: 10.5px; font-weight: 700; }
.sb-clip.is-in-use .sb-clip-tag { background: var(--green); }
.sb-tray-note { margin: 0; color: var(--text-3); font-size: 12.5px; }

/* EDITING IS A PLACE (Jay, 2026-09-02 ~23:1x: "the mechanics of how to edit a
   clip being reviewed is not intuitive for me... The design must be user
   friendly and must retain or even enhance function and features but
   simplify useability"). Two tabs, a coach line, a toolbar that names the
   moves, and visible tags on everything that can be clicked. */
.cut-focus-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; }
.cut-focus-tab { padding: 6px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; font-weight: 700; cursor: pointer; }
.cut-focus-tab.is-on { background: var(--accent-week); color: #fff; }
.sb-coach { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--amber-soft); color: var(--text); font-size: 13px; list-style: none; counter-reset: coach; }
.sb-coach li { counter-increment: coach; }
.sb-coach li::before { content: counter(coach) ' '; display: inline-block; min-width: 18px; height: 18px; margin-right: 4px; border-radius: 9px; background: var(--amber); color: #111; font-size: 11px; font-weight: 800; text-align: center; line-height: 18px; }
.sb-toolbar { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-text::after { content: attr(data-tag); position: absolute; top: -10px; right: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,0.92); color: #111; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-shadow: none; }
.sb-text:focus::after { content: 'typing: click away to save, Esc to undo'; }
.sb-text { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.55); }
.sb-tray-head { font-size: 13px; font-weight: 700; margin: 4px 0 -4px; }
/* Why the verdict is not on offer, said on screen rather than in a tooltip
   (2026-09-08). It takes the full width so it survives the wrap below. */
.cut-focus-blocked { flex: 1 0 100%; margin: 8px 0 0; font-size: 0.86rem; font-weight: 600; color: var(--text-2); }
@media (max-width: 720px) { .cut-focus-head { flex-wrap: wrap; } }

/* THE CANVAS EDITOR (his interview, 2026-09-02 ~23:0x): one canvas, options
   for the selected thing on the right, a three-track timeline underneath. */
.cv { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.cv-main { display: grid; gap: 10px; min-width: 0; }
.cv-side { display: grid; gap: 10px; }
.cv-page-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-page-title { font-size: 15px; }
.sb-panel-section { padding: 12px; border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 8px; }
.sb-panel-section h3 { margin: 0; font-size: 13.5px; }
.sb-muted { margin: 0; color: var(--text-3); font-size: 12px; line-height: 1.4; }
.sb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.sb-grid .sb-clip { flex: none; width: 100%; height: 72px; }
.sb-field { display: grid; gap: 4px; font-size: 12px; color: var(--text-2); }
.sb-input { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; resize: vertical; }
.sb-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sb-label { min-width: 48px; font-size: 12px; color: var(--text-2); }
.sb-stage.is-clip-selected .sb-stage-video, .sb-stage.is-clip-selected .sb-stage-still { outline: 3px solid var(--accent-week); outline-offset: -3px; }
.sb-selected-tag { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 8px; background: var(--accent-week); color: #fff; font-size: 11px; font-weight: 700; }
.sb-play { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border: 0; border-radius: 17px; background: rgba(255,255,255,0.92); color: #111; font-size: 14px; cursor: pointer; }
.sb-stage-slate { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; border: 0; background: transparent; color: #cbd5e1; font: inherit; font-size: 13px; text-align: center; cursor: pointer; }
/* timeline */
.tl { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.tl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tl-ruler { position: relative; height: 16px; margin-left: 56px; border-bottom: 1px solid var(--border); }
.tl-tick { position: absolute; top: 0; transform: translateX(-50%); color: var(--text-3); font-size: 10px; }
.tl-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: stretch; gap: 0; }
.tl-name { font-size: 11px; font-weight: 700; color: var(--text-2); padding-top: 6px; }
.tl-track { position: relative; display: flex; min-height: 44px; border-radius: 6px; background: var(--bg-soft, rgba(15,23,42,0.05)); overflow: hidden; }
.tl-page { position: relative; box-sizing: border-box; height: 44px; border: 2px solid var(--border); border-radius: 6px; background: #111; color: #fff; overflow: hidden; cursor: grab; user-select: none; touch-action: none; }
.tl-page img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.tl-page.is-card { background: #0F172A; }
.tl-page.is-selected { border-color: var(--accent-week); box-shadow: 0 0 0 2px var(--accent-week-tint) inset; }
.tl-page.is-dragging { opacity: 0.5; }
.tl-page-label { position: absolute; left: 6px; top: 4px; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.tl-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 10px; background: rgba(255,255,255,0.35); cursor: ew-resize; touch-action: none; }
.tl-handle::after { content: ''; position: absolute; left: 3px; right: 3px; top: 30%; bottom: 30%; border-left: 1px solid #fff; border-right: 1px solid #fff; }
.tl-transition { position: absolute; right: 12px; bottom: 3px; font-size: 10px; opacity: 0.9; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.tl-marker { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--accent-week); border-radius: 2px; pointer-events: none; }
.tl-words { min-height: 30px; }
.tl-word { position: relative; box-sizing: border-box; height: 30px; padding: 6px 8px; border-right: 1px solid var(--border); font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.tl-word.is-selected { background: var(--accent-week-tint); color: var(--text); }
.tl-line { position: absolute; top: 6px; padding: 0 4px; border-left: 2px solid var(--accent-week); font-size: 10px; white-space: nowrap; }
.tl-music { min-height: 26px; }
.tl-bed { display: flex; align-items: center; padding: 0 8px; height: 26px; border-radius: 6px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.tl-note { margin-top: 2px; }
@media (max-width: 900px) { .cv { grid-template-columns: 1fr; } }
.cut-focus-sheet.is-canvas { width: min(1280px, 100%); }
.cut-focus-preview { display: grid; gap: 4px; }
.cut-focus-btns .btn-approve { padding: 6px 14px; }

/* SHOW THE THING (Jay, 2026-09-03 02:3x): a desk to-do carries the piece's
   own thumbnail and words, and one specific action. */
.desk-todo-thumb { flex: 0 0 96px; width: 96px; height: 64px; border-radius: 8px; overflow: hidden; background: #0F172A; }
.desk-todo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.desk-todo-thumb.is-blank { background: var(--bg-soft, rgba(15,23,42,0.06)); }
.desk-todo.is-cut .desk-todo-action { background: var(--amber); color: #111; }
/* On a desktop list the picture stays small and landscape, framed on the headline band. */
.desk-todo.is-cut .desk-todo-thumb { flex-basis: 176px; width: 176px; height: 110px; }
.desk-todo.is-cut .desk-todo-thumb img { object-position: center; } /* the picture IS the headline band (3w.117) */
.desk-todo-why { white-space: normal; }
/* THE PHONE LAYOUT OF A TO-DO (2026-09-04, his screenshot): the card became
   a tall column beside an empty thumbnail with the button on top of the
   status chip. On a narrow screen the card is a grid: thumbnail and words
   in the first row, the action as its own full-width row beneath, the
   title held to three lines. */
@media (max-width: 720px) {
  .desk-todo { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "thumb main" "action action"; align-items: start; gap: 10px 12px; }
  .desk-todo-thumb { grid-area: thumb; flex: none; width: 72px; height: 48px; }
  /* A CUT'S PICTURE IS READABLE OR IT IS NOT THERE (2026-09-04, his phone:
     "the thumbnail's there, but you can't read it"). A portrait frame
     can never read at list size, so on a phone the card opens with a
     landscape strip of the cut's headline band across its full width,
     then the words, then the action. */
  .desk-todo.is-cut { grid-template-columns: minmax(0, 1fr); grid-template-areas: "thumb" "main" "action"; }
  .desk-todo.is-cut .desk-todo-thumb { width: 100%; height: 200px; border-radius: 10px; }
  .desk-todo.is-cut .desk-todo-thumb img { object-position: center; } /* the picture IS the headline band (3w.117) */
  .desk-todo-main { grid-area: main; }
  .desk-todo-action { grid-area: action; justify-self: stretch; text-align: center; padding: 11px 12px; font-size: 14px; }
  .desk-todo-top { gap: 6px; }
  .desk-todo-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
  .desk-todo-why { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* PLAYBACK IN SYNC (Jay, 2026-09-03 02:4x): the stage is the player while it
   plays and the editable page while it is paused; the playhead rides every
   track. The side panel is no longer sticky: stuck inside the scrolling
   sheet it painted a ghost copy of itself. */
.sb-stage-wrap { position: relative; margin: 0 auto; }
.sb-stage-wrap.is-wide { width: 100%; max-width: 720px; }
.sb-stage-wrap.is-tall { width: min(100%, 320px); }
.sb-stage-wrap .sb-stage { margin: 0; width: 100%; }
.sb-player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 10px; z-index: 2; display: none; }
.sb-stage-wrap.is-playing .sb-player { display: block; }
.sb-stage-wrap.is-playing .sb-page-layer { visibility: hidden; }
.sb-transport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-tracks { position: relative; display: grid; gap: 4px; }
.tl-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: 56px; background: var(--amber); box-shadow: 0 0 0 1px rgba(0,0,0,0.15); pointer-events: none; z-index: 3; }
.tl-playhead::before { content: ''; position: absolute; top: -6px; left: -5px; border: 6px solid transparent; border-top: 8px solid var(--amber); }
.tl-ruler { cursor: pointer; }

/* The concept queue (flywheel 9.2): pitched concepts above the ideas inbox. */
.concepts-section { margin-bottom: 1.5rem; }
.concept-card { border-left: 3px solid var(--amber-soft, #F4E3B2); }
.concept-meta { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.concept-source { font-size: 12.5px; color: var(--text-3); }
.concept-source a { color: var(--accent-week, #2a5b8c); }
.concept-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: 12.5px; color: var(--text-2); }
.concept-check { display: flex; gap: 0.5rem; align-items: baseline; }
.concept-check.warn { color: #7A5A00; }
.concept-check-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.concept-check-claim { padding-left: 1rem; color: #7A5A00; }
.concept-draft summary { cursor: pointer; font-size: 12.5px; color: var(--text-3); }
.concept-draft .idea-body { margin-top: 0.5rem; }

/* A day parked behind its blog while the blog is reworked (3w.57). */
.day-parked { margin: 0 0 0.75rem; padding: 10px 12px; border-radius: 10px; background: var(--amber-soft, #F4E3B2); color: #5A4300; font-size: 13px; line-height: 1.45; }
.btn.btn-parked { opacity: 0.55; cursor: not-allowed; border-style: dashed; }

/* Settled posts hidden by default, loadable per day (3w.90). */
.sit-settled-line, .day-settled-line { margin: 0.35rem 0 0; font-size: 12.5px; color: var(--text-3); }
.day-settled-line:empty { display: none; }
.btn-link { background: none; border: 0; padding: 0; color: var(--accent-week, #2a5b8c); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; }

/* Tap the picture to play or pause (2026-09-04): the badge shows the function. */
.sb-stage-wrap { cursor: default; }
.sb-play-badge { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border: 0; border-radius: 50%; background: rgba(15,23,42,0.72); color: #fff; font-size: 30px; line-height: 72px; text-align: center; z-index: 3; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.sb-play-badge[hidden] { display: none; }
.sb-stage-wrap.is-playing .sb-player { cursor: pointer; }

/* Sound is his to switch on (2026-09-05): the speaker on the picture. */
.sb-sound-badge { position: absolute; right: 10px; bottom: 10px; z-index: 3; border: 0; border-radius: 999px; padding: 6px 12px; background: rgba(15,23,42,0.78); color: #fff; font-size: 13px; cursor: pointer; }
.sb-sound-badge[hidden] { display: none; }

/* The bank in the Ideas tab (B5, 2026-09-14). */
.bank-section { margin-top: 2rem; }
.bank-card .bank-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; margin: 0.25rem 0; }
.bank-card .bank-body summary { cursor: pointer; font-size: 13px; color: var(--text-2); }
.bank-card .idea-status-row { flex-wrap: wrap; gap: 0.5rem; }

/* A failed art run says so above the picture (3f.7). */
.art-unchanged { margin: 6px 0 10px; padding: 8px 10px; border-left: 3px solid var(--attention, #b7791f); background: var(--surface-2, rgba(0,0,0,0.03)); font-size: 13px; color: var(--text-2); }