/* ==========================================================================
   GVS Client Portal — client-facing styles

   Deliberately light and calm, and deliberately unlike the internal Ops
   dashboard. Clients should feel they are inside one tidy Grow Via Social
   product, not looking at an operations tool.

   System fonts only: no CDN, no external request, nothing to go down.
   ========================================================================== */

:root {
  --ground: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --line: #e4e7ec;
  --line-strong: #d0d5dd;

  --ink: #101828;
  --ink-2: #475467;
  --ink-3: #98a2b3;

  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #eff4ff;
  --blue-line: #c7d7fe;

  --ok: #067647;
  --ok-soft: #ecfdf3;
  --ok-line: #abefc6;

  --warn: #b54708;
  --warn-soft: #fffaeb;
  --warn-line: #fedf89;

  --info: #175cd3;
  --info-soft: #eff8ff;
  --info-line: #b2ddff;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-lift: 0 4px 12px rgba(16, 24, 40, .08);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --nav-w: 228px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); }

/* ---------- layout ------------------------------------------------------ */

.shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---------- sidebar ----------------------------------------------------- */

.side {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 26px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px;
}

.brand .glyph {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.02em;
  flex: none;
}

.brand .who { min-width: 0; }
.brand .name {
  font-weight: 650;
  font-size: 13.5px;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand .sub {
  font-size: 11.5px;
  color: var(--ink-3);
}

.nav-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 8px 6px;
}

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
}

.nav a:hover { background: var(--surface-2); color: var(--ink); }

.nav a.on {
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-weight: 600;
}

/* Red, like the reference product. This is the one number a client should be
   able to find without reading anything: how many posts still need them. It
   counts down to nothing as they work. */
.nav a .count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  background: #d92d20;
  color: #fff;
  border-radius: 20px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
}

.nav a.on .count { background: #b42318; }

/* On a phone the nav is a horizontal strip, so the badge sits alongside
   rather than pushed to the far edge. */
@media (max-width: 900px) {
  .nav a .count { margin-left: 4px; }
}

.side .foot {
  margin-top: auto;
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 0 8px;
  line-height: 1.5;
}

.icon { width: 16px; height: 16px; flex: none; stroke-width: 1.9; }

/* ---------- main -------------------------------------------------------- */

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 18px 28px 0;
}

.crumb {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.crumb h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 680;
  letter-spacing: -.02em;
}

.crumb .month {
  font-size: 13.5px;
  color: var(--ink-2);
}

.headline-row {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 12px;
}

.progress-block { min-width: 230px; flex: 1 1 230px; max-width: 340px; }

.progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.progress-top strong { color: var(--ink); font-weight: 650; }

.bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 20px;
  overflow: hidden;
}
.bar span {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: 20px;
  transition: width .25s ease;
}
.bar.full span { background: var(--ok); }

.top-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* view switcher */
.views {
  display: flex;
  gap: 2px;
  margin-top: 16px;
}

.views a {
  padding: 8px 14px 10px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 7px;
}
.views a:hover { color: var(--ink); }
.views a.on { color: var(--blue-dark); border-bottom-color: var(--blue); font-weight: 650; }

.content { padding: 22px 28px 60px; }

/* ---------- buttons ----------------------------------------------------- */

.btn {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.btn:hover { background: var(--surface-2); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.btn.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.btn.primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

.btn.ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.btn.ok:hover { background: #dcf5e7; }

.btn.quiet { border-color: transparent; box-shadow: none; background: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--surface-2); color: var(--ink); }

.btn.sm { padding: 5px 10px; font-size: 12.5px; }

.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- pills ------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.5;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.pill.approved { background: #087443; color: #fff; border-color: #087443; }
.pill.approved .dot { background: #fff; }
.pill.pending  { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-strong); }
.pill.revision { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.pill.updated  { background: var(--info-soft); color: var(--info); border-color: var(--info-line); }

.chan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}

.fmt {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
}

/* ---------- table view -------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-head {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.panel-head h2 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 680;
  letter-spacing: -.005em;
}
.panel-head .hint { font-size: 12.5px; color: var(--ink-3); }

.tscroll { overflow-x: auto; }

table.grid { width: 100%; border-collapse: collapse; }

table.grid th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  white-space: nowrap;
}

table.grid td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.grid tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover { background: #fafbfc; }

td.num {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  font-weight: 600;
  font-size: 12.5px;
  width: 44px;
}

.thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.cell-content { min-width: 280px; max-width: 460px; }
.cell-title {
  font-weight: 650;
  font-size: 13.5px;
  margin-bottom: 3px;
  letter-spacing: -.005em;
}
.cell-caption {
  color: var(--ink-2);
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cell-tags {
  color: var(--blue);
  font-size: 12px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chans { display: flex; gap: 4px; flex-wrap: wrap; }

.when { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.when .v { display: block; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: normal; }

.rowacts { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }

.note-line {
  margin-top: 7px;
  padding: 7px 10px;
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: #93370d;
}
.note-line b { font-weight: 700; }

/* ---------- gallery ----------------------------------------------------- */

.cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: var(--shadow-lift); }

.card .art {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  display: block;
}
.card .art img { width: 100%; height: 100%; object-fit: contain; display: block; }

.card .art .badge {
  position: absolute;
  top: 9px;
  left: 9px;
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .18);
}

.card .art .no {
  position: absolute;
  top: 9px;
  right: 9px;
  background: rgba(16, 24, 40, .62);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}

.card .body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.gallery-caption {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.gallery-tags {
  color: var(--blue);
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.card .body .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: auto;
}
.card .acts { display: flex; gap: 6px; padding: 0 13px 13px; }
.card .acts .btn { flex: 1; justify-content: center; }

/* ---------- approvals --------------------------------------------------- */

.stack { display: flex; flex-direction: column; gap: 18px; }

.group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.group-head h2 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 680;
  letter-spacing: -.01em;
}
.group-head .n {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1px 8px;
}

.review-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.review-row:last-child { border-bottom: none; }
.review-row .thumb-lg {
  width: 88px;
  height: 110px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.review-row .rmeta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.review-row .rtitle { font-weight: 650; font-size: 14px; margin-bottom: 4px; letter-spacing: -.008em; }
.review-row .rcap { color: var(--ink-2); font-size: 13px; }
.review-row .rtags { color: var(--blue); font-size: 12px; margin-top: 5px; }
.review-row .racts { display: flex; flex-direction: column; gap: 7px; min-width: 140px; }
.review-row .racts .btn { justify-content: center; }

/* ---------- empty ------------------------------------------------------- */

.empty {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 56px 28px;
  text-align: center;
  box-shadow: var(--shadow);
}
.empty .ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  color: var(--ok);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
.empty h2 {
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -.015em;
}
.empty p { margin: 0 auto; color: var(--ink-2); max-width: 42ch; font-size: 13.5px; }
.empty .below { margin-top: 20px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------- submit bar -------------------------------------------------- */

.submit-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.submit-card .finalnote { margin: 0; flex: 1 1 320px; }
.submit-card > .btn { flex: none; }
@media (max-width: 640px) {
  .submit-card { align-items: stretch; }
  .submit-card > .btn { width: 100%; justify-content: center; }
}
.submit-card .grow { flex: 1 1 320px; min-width: 240px; }
.submit-card label {
  display: block;
  font-size: 12.5px;
  font-weight: 650;
  margin-bottom: 6px;
}
.submit-card .sub { font-weight: 400; color: var(--ink-3); }

textarea, input[type="text"], input[type="date"], input[type="password"] {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  line-height: 1.5;
  resize: vertical;
}
textarea:focus, input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

/* ---------- dialog ------------------------------------------------------ */

dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  width: min(520px, calc(100vw - 32px));
  box-shadow: 0 20px 48px rgba(16, 24, 40, .22);
  color: var(--ink);
  background: var(--surface);
}
dialog::backdrop { background: rgba(16, 24, 40, .45); }

dialog .dhead {
  padding: 18px 20px 0;
}
dialog .dhead h3 {
  margin: 0 0 4px;
  font-size: 16.5px;
  font-weight: 680;
  letter-spacing: -.015em;
}
dialog .dhead p { margin: 0; color: var(--ink-2); font-size: 13px; }
dialog .dbody { padding: 16px 20px 0; }
dialog .dfoot {
  padding: 16px 20px 20px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
dialog .peek {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- flashes ----------------------------------------------------- */

.flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.flash {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: 1px solid;
  font-weight: 500;
}
.flash.ok    { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.flash.error { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.flash.info  { background: var(--info-soft); border-color: var(--info-line); color: var(--info); }

/* ---------- standalone pages -------------------------------------------- */

.plain {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}
.plain .box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  padding: 36px 34px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}
.plain .box h1 {
  margin: 16px 0 8px;
  font-size: 20px;
  font-weight: 680;
  letter-spacing: -.02em;
}
.plain .box p { margin: 0; color: var(--ink-2); font-size: 14px; }
.plain .box .ring {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto;
}
.plain .box .ring.good { background: var(--ok-soft); border: 1px solid var(--ok-line); color: var(--ok); }
.plain .box .ring.warn { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); }
.plain .box .ring.blue { background: var(--blue-soft); border: 1px solid var(--blue-line); color: var(--blue); }

/* ---------- help -------------------------------------------------------- */

.prose { max-width: 66ch; }
.prose h2 { font-size: 15.5px; font-weight: 680; margin: 26px 0 7px; letter-spacing: -.01em; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 12px; color: var(--ink-2); font-size: 14px; }
.prose ol, .prose ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); font-size: 14px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--ink); font-weight: 650; }

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 900px) {
  /* minmax(0, …), not a bare 1fr: 1fr has a min-content floor, so one wide
     element would widen the whole column past the phone's screen. */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }
  .side .nav-label, .side .foot { display: none; }
  .nav { flex-direction: row; gap: 4px; }
  .nav a { white-space: nowrap; padding: 6px 11px; }
  .brand { flex: none; }
  .brand .who { display: none; }
  .topbar, .content { padding-left: 18px; padding-right: 18px; }
  .review-row { grid-template-columns: 68px minmax(0, 1fr); }
  .review-row .thumb-lg { width: 68px; height: 86px; }
  .review-row .racts { grid-column: 1 / -1; flex-direction: row; }
  .review-row .racts .btn { flex: 1; }
}

@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .crumb h1 { font-size: 17px; }
  .content { padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Board table — modelled closely on the reference platform's Table view.

   A true grid (vertical and horizontal rules), tall rows, full captions with
   their paragraph breaks intact, and separate Status and Approval columns.
   ========================================================================== */

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 14px;
  flex-wrap: wrap;
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue-dark);
  background: var(--blue-soft);
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 6px 11px;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
}
.tool:hover { background: #e0eaff; }
.tool.tool-plain { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.tool.tool-plain:hover { background: var(--surface-2); }
.tool .icon { width: 14px; height: 14px; }

.board {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.bscroll { overflow-x: auto; }

table.board-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 1180px;
}

table.board-grid th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--surface);
  white-space: nowrap;
  vertical-align: middle;
}
table.board-grid th .icon {
  width: 14px; height: 14px;
  vertical-align: -2px; margin-right: 6px; color: var(--ink-3);
}
table.board-grid th:last-child { border-right: none; }

table.board-grid td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  vertical-align: top;
}
table.board-grid td:last-child { border-right: none; }
table.board-grid tbody tr:last-child td { border-bottom: none; }

/* column widths */
.col-n     { width: 52px; }
.col-stat  { width: 178px; }
.col-prev  { width: 186px; }
.col-cont  { width: auto; min-width: 320px; }
.col-appr  { width: 190px; }
.col-pub   { width: 208px; }
.col-fmt   { width: 132px; }
.col-month { width: 128px; }
.col-act   { width: 146px; }

.gnum {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
  padding-top: 3px;
}

/* group header */
tr.group td {
  background: var(--surface-2);
  border-right: none;
  padding: 11px 14px;
}
tr.group .gh { display: flex; align-items: center; gap: 10px; }
tr.group .gh strong { font-size: 13.5px; font-weight: 680; letter-spacing: -.01em; }
tr.group .gh span { font-size: 12px; color: var(--ink-3); }

/* preview */
.prev {
  display: block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
.preview-link {
  appearance: none;
  display: block;
  position: relative;
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}
.preview-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.preview-cue {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(16, 24, 40, .72);
  color: #fff;
  box-shadow: 0 2px 7px rgba(16, 24, 40, .24);
  pointer-events: none;
}
.preview-cue .fa-solid { font-size: 12px; }

/* caption — paragraph breaks preserved, like the reference */
.cap {
  font-size: 13px;
  line-height: 1.62;
  color: var(--ink);
  white-space: pre-line;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.rows-xl .cap { -webkit-line-clamp: 12; }
.cap-tags {
  color: var(--blue);
  font-size: 12px;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.rows-md .prev, .rows-md .mediawrap { max-width: 92px; }
.rows-xl .prev, .rows-xl .mediawrap { max-width: 158px; }

/* publishing — overlapping channel marks, then the date beneath */
.avatars { display: flex; align-items: center; padding-left: 5px; margin-bottom: 9px; }
.av {
  width: 27px; height: 27px; border-radius: 50%;
  margin-left: -5px;
  border: 2px solid var(--surface);
  display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 700;
  position: relative; flex: none;
}
.av svg { width: 14px; height: 14px; fill: #fff; }
.av .clk {
  position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #98a2b3; border: 1.5px solid var(--surface);
  display: grid; place-items: center;
}
.av .clk svg { width: 7px; height: 7px; fill: none; stroke: #fff; stroke-width: 3; }

.av.facebook  { background: #1877f2; }
.av.instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.av.linkedin  { background: #0a66c2; }
.av.pinterest { background: #e60023; }
.av.youtube   { background: #ff0000; }
.av.tiktok    { background: #111827; }
.av.threads   { background: #111827; }
.av.bluesky   { background: #0085ff; }
.av.gmb       { background: #4285f4; }
.av.twitter   { background: #111827; }
.av.other     { background: #667085; }

.pubwhen {
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* format + month pills */
.tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  border-radius: 6px; padding: 4px 9px; white-space: nowrap;
}
.tag-pill .icon { width: 13px; height: 13px; }
.tag-fmt   { background: var(--ok-soft); color: #0b6b45; }
.tag-month { background: #fef3f2; color: #b42318; }

/* stacked row actions */
.stackacts { display: flex; flex-direction: column; gap: 7px; }
.stackacts .btn { justify-content: center; width: 100%; }

@media (max-width: 900px) {
  .toolbar { padding-top: 4px; }
}

/* ---------- dialog extras ----------------------------------------------- */

.dlabel {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: var(--ink-2);
  margin: 0 0 6px;
}
.dbody .dlabel + textarea,
.dbody .dlabel + input { margin-bottom: 14px; }

.mediapeek {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
}
.mediapeek img {
  max-height: 190px;
  max-width: 100%;
  border-radius: 4px;
  display: block;
}
.mediapeek img[hidden] { display: none; }

/* ---------- click-to-edit cells ----------------------------------------- */

.cellbtn {
  appearance: none;
  border: 1px solid transparent;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  padding: 6px;
  margin: -6px;
  width: calc(100% + 12px);
  border-radius: 7px;
  cursor: pointer;
  display: block;
  position: relative;
}
.cellbtn:hover { background: var(--blue-soft); border-color: var(--blue-line); }
.cellbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.cellhint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 650;
  color: var(--blue-dark);
  background: var(--surface);
  border: 1px solid var(--blue-line);
  border-radius: 5px;
  padding: 2px 7px;
  opacity: 0;
  transition: opacity .12s ease;
}
.cellbtn:hover .cellhint,
.cellbtn:focus-visible .cellhint { opacity: 1; }

/* Always visible on touch, where there is no hover to reveal it. */
@media (hover: none) {
  .cellhint { opacity: 1; }
}

.cellbtn.media { width: auto; margin: -6px; }
.cellbtn.media .cellhint { margin-top: 5px; }

/* ---------- publish-as-written confirmation ----------------------------- */

.asis {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.asis svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }

.confirm {
  margin-top: 14px;
  border: 1px solid var(--warn-line);
  background: var(--warn-soft);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}
.confirm[hidden] { display: none; }
.confirm strong { display: block; font-size: 13.5px; color: #93370d; margin-bottom: 5px; }
.confirm p { margin: 0 0 8px; font-size: 12.5px; color: var(--warn); line-height: 1.55; }
.confirm-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.confirm-acts .btn { font-size: 12.5px; }

/* ---------- planner ----------------------------------------------------- */

table.cal {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 940px;
}

table.cal th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 10px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
table.cal th:last-child { border-right: none; }

table.cal td {
  vertical-align: top;
  height: 128px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--surface);
}
table.cal td:last-child { border-right: none; }
table.cal tr:last-child td { border-bottom: none; }

table.cal td.out { background: #fbfcfd; }
table.cal td.out .daynum { color: var(--ink-3); opacity: .55; }
table.cal td.past { background: #fafbfc; }
table.cal td.today { background: var(--blue-soft); }

.daynum {
  font-size: 12px;
  font-weight: 650;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.todaytag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--blue);
  color: #fff;
  border-radius: 20px;
  padding: 1px 6px;
}

.calpost {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--line-strong);
  border-radius: 6px;
  padding: 6px 7px;
  margin-bottom: 6px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
button.calpost:hover { border-color: var(--blue-line); border-left-color: var(--blue); }
button.calpost:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.calpost.approved { border-left-color: var(--ok); background: var(--ok-soft); }
.calpost.pending  { border-left-color: var(--ink-2); background: var(--surface-2); }
.calpost.updated  { border-left-color: var(--info); background: var(--info-soft); }
.calpost.revision { border-left-color: var(--warn); background: var(--warn-soft); }

.calpost img {
  width: 30px;
  height: 38px;
  object-fit: cover;
  border-radius: 4px;
  flex: none;
  background: var(--surface-2);
}
.cp-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cp-when {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cp-text {
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cal-state {
  width: fit-content;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: .01em;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--surface);
}
.approved .cal-state { color: var(--ok); }
.pending .cal-state { color: var(--ink-2); }
.updated .cal-state { color: var(--info); }
.revision .cal-state { color: var(--warn); }

.callegend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--ink-2);
}
.callegend strong { margin-right: 2px; color: var(--ink); }
.callegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  font-weight: 650;
}
.callegend .k { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid currentColor; }
.callegend .k.approved { background: var(--ok); }
.callegend .k.pending  { background: var(--ink-3); }
.callegend .k.updated  { background: var(--info); }
.callegend .k.revision { background: var(--warn); }

.whenrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 480px) { .whenrow { grid-template-columns: 1fr; } }

.pubtime { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.cellbtn.when { width: auto; }

/* ---------- one-click approve, in the Approval column ------------------- */

.approvebtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  border-radius: 20px;
  padding: 5px 13px 5px 10px;
  cursor: pointer;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
.approvebtn svg { width: 13px; height: 13px; flex: none; }
.approvebtn:hover { background: var(--ok); border-color: var(--ok); color: #fff; }
.approvebtn:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }

.approvehint {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 5px;
}

/* ---------- approved-and-closed notice ---------------------------------- */

.lockbar {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius);
  padding: 13px 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.lockbar > svg {
  width: 17px; height: 17px; flex: none;
  color: var(--ok); margin-top: 1px;
}
.lockbar strong {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -.005em;
  margin-bottom: 2px;
}
.lockbar span { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* ---------- video ------------------------------------------------------- */

video.isvideo { object-fit: cover; background: #0f172a; display: block; }
.thumb.isvideo { width: 60px; height: 60px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.thumb-lg.isvideo { width: 88px; height: 110px; }
.calthumb { width: 30px; height: 38px; object-fit: cover; border-radius: 4px; flex: none; background: var(--surface-2); }

.mediawrap { position: relative; display: block; width: 100%; }
.playmark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(15, 23, 42, .88);
  background: rgba(255, 255, 255, .96); color: #0f172a;
  box-shadow: 0 3px 12px rgba(15, 23, 42, .42);
  display: grid; place-items: center; line-height: 0; pointer-events: none;
}
.playmark svg { display: block; width: 18px; height: 18px; transform: translateX(1px); }
.playmark .fa-solid { display: block; font-size: 17px; transform: translateX(1px); }

.art-media { width: 100%; height: 100%; object-fit: cover; display: block; }

.detailmedia {
  width: 100%; max-height: 75vh; object-fit: contain; border-radius: 8px;
  border: 1px solid var(--line); display: block; background: #0f172a;
}
.approval-error { margin-top: 6px; color: var(--danger); font-size: 11px; line-height: 1.4; }
.post-detail-row {
  border-bottom: 0;
  grid-template-columns: minmax(320px, 46%) minmax(0, 1fr) auto;
  gap: 22px;
  padding: 22px;
}
.post-detail-placeholder { width: 100%; aspect-ratio: 4 / 5; }
.detailmedia-link { display: block; width: 100%; color: var(--blue-dark); font-size: 12px; font-weight: 650; text-align: center; text-decoration: none; }
.detailmedia-link .detailmedia-label { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.detailmedia-link:hover .detailmedia-label { text-decoration: underline; }
.detailmedia-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

.media-preview-dialog {
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}
.media-preview-shell { display: flex; flex-direction: column; min-height: 0; max-height: calc(100dvh - 32px); }
.media-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}
.media-preview-head h2 { margin: 0; font-size: 16px; }
.media-preview-close {
  appearance: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.media-preview-close:hover { background: var(--surface-2); }
.media-preview-close:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.media-preview-stage {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 16px;
  overflow: auto;
  background: #0b1118;
}
.media-preview-stage img,
.media-preview-stage video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 104px);
  object-fit: contain;
}
.media-preview-stage img[hidden],
.media-preview-stage video[hidden] { display: none; }

@media (max-width: 900px) {
  .post-detail-row { grid-template-columns: minmax(220px, 42%) minmax(0, 1fr); }
  .post-detail-row .racts { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .post-detail-row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; }
  .detailmedia { max-height: none; }
  .media-preview-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .media-preview-shell { max-height: calc(100dvh - 16px); }
  .media-preview-stage { padding: 8px; }
  .media-preview-stage img,
  .media-preview-stage video { max-height: calc(100dvh - 88px); }
}

.mediapeek video { max-height: 190px; max-width: 100%; border-radius: 4px; display: block; }
.mediapeek video[hidden], .mediapeek img[hidden] { display: none; }

/* ==========================================================================
   Contrast, focus and colour corrections
   ========================================================================== */

/* --ink-3 was #98a2b3 — 2.6:1 on white, and it carried the line explaining
   the whole model. This passes AA. */
:root { --ink-3: #667085; }

/* The focus ring was --blue-soft (#eff4ff), 1.05:1 against white: invisible.
   Removing the UA outline and replacing it with nothing is worse than
   leaving the default alone. */
textarea:focus, input:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
  box-shadow: none;
}

.nav a:focus-visible,
.views a:focus-visible,
.tool:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Red on every row for a month name reads as a warning. Red is the error
   colour; it should not be spent on "October 2026". */
.tag-month { background: var(--surface-2); color: var(--ink-2); }

/* Screen-reader-only text, for the platform marks. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A post with no artwork yet should say so, not be a grey rectangle. */
.noart {
  display: grid !important;
  place-items: center;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
}
.noart span {
  font-size: 10.5px; font-weight: 600; color: var(--ink-3);
  text-align: center; padding: 0 4px; line-height: 1.3;
}

/* ==========================================================================
   Phone layout — cards instead of a 1180px grid
   ========================================================================== */

.postcards { display: none; }

@media (max-width: 760px) {
  .board { display: none; }
  .postcards { display: flex; flex-direction: column; gap: 12px; }

  .pcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .pc-head {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 11px 13px; border-bottom: 1px solid var(--line);
    background: var(--surface-2);
  }
  .pc-num {
    font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px;
    color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
    border-radius: 20px; min-width: 24px; text-align: center; padding: 1px 7px;
  }
  .pc-when {
    margin-left: auto; font-size: 11.5px; color: var(--ink-2);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }

  .pc-body { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 13px; }

  .pc-artbtn {
    appearance: none; border: none; background: none; padding: 0;
    font: inherit; color: inherit; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: 5px;
  }
  .pc-artbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 7px; }
  .pc-art {
    width: 96px; aspect-ratio: 4 / 5; object-fit: cover;
    border-radius: 7px; border: 1px solid var(--line); display: block;
    background: var(--surface-2);
  }
  .pc-artlabel {
    font-size: 10.5px; font-weight: 650; color: var(--blue-dark);
    line-height: 1.25; text-align: center;
  }

  .pc-title { font-weight: 650; font-size: 14px; letter-spacing: -.008em; margin-bottom: 4px; }
  .pc-cap {
    font-size: 13.5px; line-height: 1.55; color: var(--ink);
    white-space: pre-line;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8;
    overflow: hidden;
  }
  .pc-tags { color: var(--blue); font-size: 12px; margin-top: 6px; }
  .pc-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 7px; }

  .pcard .note-line { margin: 0 13px 13px; }

  .pc-acts {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 0 13px 13px;
  }
  .pc-acts form { flex: 1 1 100%; }
  .pc-acts .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .pc-acts form .btn { width: 100%; }
  .pc-done {
    flex: 1 1 100%; text-align: center; font-size: 12.5px; font-weight: 650;
    color: #fff; background: #087443; border: 1px solid #087443;
    border-radius: var(--radius-sm); padding: 7px;
  }

  /* the toolbar row-height toggle is meaningless without the table */
  .toolbar a.tool { display: none; }

  /* gallery action row: three buttons at 46px each became three-line stacks */
  .card .acts { flex-wrap: wrap; }
  .card .acts .btn { flex: 1 1 100%; }
  .card .acts form { flex: 1 1 100%; }

  /* dialogs: keep the save button reachable with the keyboard open */
  dialog[open] {
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
  }
  dialog form { display: flex; flex-direction: column; min-height: 0; }
  dialog .dbody { overflow-y: auto; flex: 1 1 auto; }
  dialog .dfoot {
    position: sticky; bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  #edit-caption { min-height: 120px; }
}

/* ---------- calendar on a phone: a list, not a 940px grid --------------- */

.callist { display: none; }

.finalnote {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 0; font-size: 12.5px; color: var(--ink-2);
  flex: 1 1 100%; line-height: 1.5;
}
.finalnote svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--ink-3); }

@media (max-width: 760px) {
  .callist { display: flex; flex-direction: column; gap: 14px; }
  .callist + .board { display: none; }
  .callegend { align-items: flex-start; }
  .callegend strong { flex-basis: 100%; }

  .cl-day {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 11px 12px 12px;
  }
  .cl-day.past { opacity: .62; }
  .cl-date {
    font-size: 12px; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--ink-2);
    margin-bottom: 9px; display: flex; align-items: center; gap: 7px;
  }
  .cl-day .calpost { margin-bottom: 8px; padding: 9px 10px; }
  .cl-day .calpost:last-child { margin-bottom: 0; }
  .cl-day .calthumb { width: 40px; height: 50px; }
  .cl-day .cp-text { -webkit-line-clamp: 2; font-size: 12.5px; }
  .cl-change {
    margin-left: auto; align-self: center; flex: none;
    font-size: 11px; font-weight: 650; color: var(--blue-dark);
    background: var(--blue-soft); border: 1px solid var(--blue-line);
    border-radius: 5px; padding: 3px 8px; white-space: nowrap;
  }
}

/* ---------- choosing between a free fix and an expensive one ------------ */

.choices { display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }

.choice {
  appearance: none;
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}
.choice:hover { border-color: var(--blue); background: var(--blue-soft); }
.choice:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ch-title { font-size: 14px; font-weight: 650; letter-spacing: -.008em; }
.ch-sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

#choose-art { border-style: dashed; }
#choose-art:hover { border-color: var(--warn); background: var(--warn-soft); }
#choose-art:hover .ch-sub { color: var(--warn); }

/* The expensive action is a quiet link, not a button competing with Approve. */
.asklink {
  appearance: none; background: none; border: none; padding: 2px 0;
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--ink-3); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; text-align: left;
}
.asklink:hover { color: var(--ink-2); }
.asklink:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }

.group-head .n.hot {
  background: #fef3f2;
  border-color: #fecdca;
  color: #b42318;
}

/* ---------- lifecycle tags ---------------------------------------------
   Where a post is in its life. Deliberately a different shape from the
   approval pill so the two columns never read as the same thing.
   ---------------------------------------------------------------------- */

.col-life { width: 158px; }

.life {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
  border-radius: 6px; padding: 4px 9px; line-height: 1.5;
  border: 1px solid transparent;
}
.life svg { width: 12px; height: 12px; flex: none; }

.life.waiting   { background: #fff6ed; color: #b93815; border-color: #f9dbaf; }
.life.approved  { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.life.scheduled { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-strong); }
.life.published { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }
.life.making    { background: #f4f3ff; color: #5925dc; border-color: #d9d6fe; }

/* ==========================================================================
   Approvals — a flat list of what needs a decision, grouped under one header
   ========================================================================== */

.approvalgroup {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ag-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.ag-icon {
  width: 26px; height: 26px; border-radius: 6px; flex: none;
  background: var(--blue-soft); color: var(--blue-dark);
  display: grid; place-items: center;
}
.ag-icon svg { width: 15px; height: 15px; }
.ag-head h2 {
  margin: 0; font-size: 14.5px; font-weight: 680; letter-spacing: -.01em;
}
.ag-count {
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 20px; padding: 1px 9px; font-variant-numeric: tabular-nums;
}
.ag-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ag-note { font-size: 12.5px; color: var(--ink-3); }

.ag-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}
.ag-row:last-child { border-bottom: none; }
.ag-row:hover { background: #fafbfc; }

.ag-thumb { display: block; }
.ag-art {
  width: 62px; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface-2); display: block;
}

.ag-when {
  font-size: 12px; color: var(--ink-3); margin-bottom: 5px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ag-flag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--info-soft); color: var(--info);
  border: 1px solid var(--info-line); border-radius: 20px; padding: 1px 7px;
}
.ag-cap {
  font-size: 13.5px; line-height: 1.6; color: var(--ink);
  white-space: pre-line;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.ag-asked {
  font-size: 12.5px; line-height: 1.5; color: #93370d;
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm); padding: 7px 10px;
}
.ag-asked b { font-weight: 700; }

.ag-chan, .ag-fmt { flex: none; }
.ag-chan .avatars { margin-bottom: 0; }

.ag-act { display: flex; gap: 8px; align-items: center; flex: none; }
.ag-act .btn { white-space: nowrap; }

.quietgroup .ag-icon { background: var(--warn-soft); color: var(--warn); }

@media (max-width: 900px) {
  .ag-row {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }
  .ag-chan, .ag-fmt { grid-column: 2; }
  .ag-act { grid-column: 1 / -1; }
  .ag-act form { flex: 1; }
  .ag-act .btn { width: 100%; justify-content: center; }
  .ag-head h2 { font-size: 13.5px; }
  .ag-actions { margin-left: 0; width: 100%; }
  .ag-actions form { flex: 1; }
  .ag-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- month switcher ---------------------------------------------- */

.monthpick { display: inline-flex; }
.monthpick select {
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 5px 30px 5px 11px; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.monthpick select:hover { border-color: var(--blue); color: var(--ink); }
.monthpick select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Creator brand reference stays wide and visible after approval. */
.brand-profile-card { max-width:1120px; margin:18px 0; }
.brand-profile-card h2 { margin:0 0 8px; font-size:16px; }
.brand-profile-card h3 { font-size:14px; }
.brand-profile-card .why { color:var(--soft); font-size:13px; line-height:1.5; }
.brand-profile-card .links { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px; }
.brand-profile-card .links a { padding:8px; border:1px solid var(--line); border-radius:6px; text-decoration:none; }
.brand-profile-card .field { margin:12px 0; }
.brand-profile-card .field label { display:block; margin-bottom:5px; }
.brand-profile-card .field input { width:100%; box-sizing:border-box; }
.brand-profile-card .brand-colors { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.brand-profile-card .brand-color { display:flex; gap:6px; align-items:center; padding:6px; border:1px solid var(--line); border-radius:6px; font-size:12px; }
.brand-profile-card .brand-swatch { width:24px; height:24px; border:1px solid var(--line); border-radius:4px; }
.client-detail .brand-profile-card .brand-assets, .brand-profile-card .brand-assets { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.client-detail .brand-profile-card .brand-asset, .brand-profile-card .brand-asset { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:10px; border:1px solid var(--line); border-radius:8px; min-width:0; font-size:12px; overflow-wrap:anywhere; }
.brand-thumbnail { display:flex; flex-direction:column; gap:6px; font-size:12px; text-align:center; }
.brand-thumbnail img { width:100%; height:110px; object-fit:contain; background:#f3f5f7; border-radius:6px; }
#brand-preview-dialog { width:min(900px,90vw); max-height:90vh; overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); }
#brand-preview-dialog::backdrop { background:rgba(0,0,0,.65); }
#brand-preview-image { display:block; max-width:100%; max-height:65vh; margin:12px auto; object-fit:contain; }
.follow-ups .fu-message { white-space:pre-wrap; overflow-wrap:anywhere; max-width:550px; font:inherit; font-size:12px; line-height:1.55; }