/* Marketingbot's look. Elements are styled directly, so a plain page looks right by itself; classes are for the few
   things that need saying. Colours are tokens, redefined for dark mode. */
:root {
  --bg: #f7f5f2; --surface: #ffffff; --sunken: #f1eeea; --line: #e4dfd8; --line-strong: #cfc8be;
  --ink: #211d19; --muted: #6f675d; --faint: #9a9186;
  --accent: #c8441b; --accent-hover: #ab3812; --accent-ink: #ffffff; --accent-soft: #fbe9e2;
  --good: #1e7a4c; --good-soft: #e0f2e8; --warn: #96640a; --warn-soft: #faefd5;
  --bad: #b3261e; --bad-soft: #fbe5e3; --info: #2a5f9e; --info-soft: #e3edf8; --plain-soft: #eee9e2;
  --shadow: 0 1px 2px rgb(33 29 25 / 6%), 0 1px 1px rgb(33 29 25 / 4%);
  --radius: 10px; --radius-small: 7px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161412; --surface: #1f1c19; --sunken: #292521; --line: #35302a; --line-strong: #4a433b;
    --ink: #f2eee8; --muted: #a89f93; --faint: #7d7469;
    --accent: #ec6a3f; --accent-hover: #f27f58; --accent-ink: #1f120c; --accent-soft: #3d2118;
    --good: #5fc896; --good-soft: #17352a; --warn: #e6b85c; --warn-soft: #3a2d12;
    --bad: #f08a82; --bad-soft: #3f1d1a; --info: #8ab8ec; --info-soft: #1b2d44; --plain-soft: #2d2925;
    --shadow: 0 1px 2px rgb(0 0 0 / 35%);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font); }
a { color: var(--accent); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.2; letter-spacing: -0.015em; }
h2 { margin: 28px 0 10px; font-size: 16px; line-height: 1.3; letter-spacing: -0.005em; }
h3 { margin: 18px 0 6px; font-size: 14px; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; padding-left: 20px; }
img, video { max-width: 100%; height: auto; }
audio { max-width: 100%; height: 36px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--bad); }
.success { color: var(--good); }
.pre { white-space: pre-line; }

/* Frame */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px; overflow-y: auto;
           padding: 18px 12px; background: var(--surface); border-right: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 9px; padding: 2px 8px; color: var(--ink); font-weight: 650; font-size: 15px; }
.logo:hover { text-decoration: none; }
.logo-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent);
             color: var(--accent-ink); font-size: 14px; font-weight: 750; }
.nav-label { margin: 0 8px 5px; color: var(--faint); font-size: 11px; font-weight: 650; letter-spacing: 0.06em;
             text-transform: uppercase; }
.nav-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px;
            border-radius: var(--radius-small); color: var(--ink); font-weight: 500; }
.nav-link:hover { background: var(--sunken); text-decoration: none; }
.nav-link.active { background: var(--accent-soft); color: var(--accent); }
.count { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--accent-ink);
         font-size: 12px; font-weight: 650; text-align: center; }
.sidebar-foot { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid var(--line); }
.sidebar-foot .email { display: block; margin-bottom: 6px; overflow: hidden; color: var(--muted); font-size: 13px;
                       text-overflow: ellipsis; white-space: nowrap; }
main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 28px 32px 64px; }
.bare main { max-width: 400px; padding-top: 12vh; }

/* Page head and tabs */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px;
             margin-bottom: 16px; }
.tabs { display: flex; gap: 2px; margin: 0 0 22px; overflow-x: auto; border-bottom: 1px solid var(--line);
        scrollbar-width: none; }
.tabs a { flex: none; margin-bottom: -1px; padding: 8px 11px; border-bottom: 2px solid transparent; color: var(--muted);
          font-weight: 550; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.active { border-color: var(--accent); color: var(--ink); }

/* Surfaces */
.card { margin-bottom: 16px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radius); box-shadow: var(--shadow); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
          margin-bottom: 16px; padding: 10px 14px; border-radius: var(--radius-small); background: var(--info-soft);
          color: var(--info); font-weight: 500; }
.banner.warning { background: var(--warn-soft); color: var(--warn); }
.banner.danger { background: var(--bad-soft); color: var(--bad); }
.empty { padding: 36px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted);
         text-align: center; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.sticky { position: sticky; top: 20px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 18px; }
.stat { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.stat strong { display: block; font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat span { color: var(--muted); font-size: 13px; }

/* Messages */
.messages { display: grid; gap: 8px; margin-bottom: 16px; }
.message { margin: 0; padding: 10px 14px; border-radius: var(--radius-small); background: var(--info-soft); color: var(--info);
           font-weight: 500; }
.message.success { background: var(--good-soft); color: var(--good); }
.message.error { background: var(--bad-soft); color: var(--bad); }
.message.warning { background: var(--warn-soft); color: var(--warn); }

/* Pills */
.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--plain-soft); color: var(--muted);
        font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.review, .pill.changes, .pill.needs_person, .pill.writing { background: var(--warn-soft); color: var(--warn); }
.pill.approved, .pill.publishing, .pill.processing { background: var(--info-soft); color: var(--info); }
.pill.published { background: var(--good-soft); color: var(--good); }
.pill.failed { background: var(--bad-soft); color: var(--bad); }

/* Buttons */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px;
                  padding: 6px 14px; background: var(--surface); border: 1px solid var(--line-strong);
                  border-radius: var(--radius-small); color: var(--ink); cursor: pointer; font: inherit;
                  font-weight: 550; transition: background-color 120ms, border-color 120ms; }
button:hover, .button:hover { background: var(--sunken); text-decoration: none; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
button.primary, .button.primary, button[value="approve"], button[value="apply"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover, .button.primary:hover, button[value="approve"]:hover, button[value="apply"]:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); }
button.quiet, button[value="reject"], button[value="discard"], button[value="remove_member"] {
  background: transparent; border-color: transparent; color: var(--muted); }
button[value="reject"]:hover, button[value="remove_member"]:hover { background: var(--bad-soft); color: var(--bad); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
form.inline { display: inline; }

/* Forms */
label { display: block; margin: 12px 0 4px; font-size: 13px; font-weight: 600; }
label:has(input[type=checkbox]) { display: flex; align-items: center; gap: 8px; font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search],
input[type=datetime-local], input[type=date], input[type=file], select, textarea {
  display: block; width: 100%; min-height: 38px; padding: 7px 10px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-small); color: var(--ink); font: inherit; }
textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; }
.helptext { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }
.errorlist { margin: 3px 0; padding: 0; color: var(--bad); font-size: 13px; list-style: none; }

/* Tables and lists */
.table-wrap { overflow-x: auto; }
table { width: 100%; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-collapse: separate;
        border-radius: var(--radius); border-spacing: 0; overflow: hidden; }
th { background: var(--sunken); color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 0.03em; text-align: left;
     text-transform: uppercase; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child > td { border-bottom: 0; }
td > form.inline button { min-height: 30px; padding: 3px 10px; }
ul.posts { margin: 0 0 16px; padding: 0; background: var(--surface); border: 1px solid var(--line);
           border-radius: var(--radius); list-style: none; overflow: hidden; }
ul.posts > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 14px;
                border-bottom: 1px solid var(--line); }
ul.posts > li:last-child { border-bottom: 0; }
.row-title { color: var(--ink); font-weight: 600; }
.row-title:hover { color: var(--accent); }
.row-meta { margin-left: auto; color: var(--muted); font-size: 13px; }
.row-error { flex-basis: 100%; color: var(--bad); font-size: 13px; }

/* Calendar */
.month-nav { display: flex; align-items: center; gap: 6px; }
.month-nav strong { min-width: 130px; font-size: 16px; text-align: center; }
.month-nav .button { min-height: 32px; padding: 2px 10px; }
.weekdays, .month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekdays { color: var(--faint); font-size: 12px; font-weight: 650; text-align: left; }
.weekdays span { padding: 0 6px 5px; }
.month { background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); gap: 1px; margin-bottom: 20px;
         overflow: hidden; }
.day { min-height: 96px; padding: 5px 6px; background: var(--surface); font-size: 12px; }
.day.other { background: var(--sunken); color: var(--faint); }
.day.today .day-number { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
                         background: var(--accent); color: var(--accent-ink); font-weight: 650; }
.day-number { color: var(--muted); }
.chip { display: block; margin-top: 3px; padding: 2px 5px; overflow: hidden; border-left: 3px solid var(--faint);
        border-radius: 4px; background: var(--sunken); color: var(--ink); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.chip:hover { text-decoration: none; filter: brightness(0.97); }
.chip.review, .chip.changes { border-color: var(--warn); background: var(--warn-soft); }
.chip.approved, .chip.publishing { border-color: var(--info); background: var(--info-soft); }
.chip.published { border-color: var(--good); background: var(--good-soft); }
.chip.failed { border-color: var(--bad); background: var(--bad-soft); }
.agenda { display: grid; gap: 8px; }
.agenda-item { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; padding: 12px 14px;
               background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.agenda-date strong { display: block; font-size: 15px; }
.agenda-date span { color: var(--muted); font-size: 12px; }
.agenda-item img { width: 76px; height: 76px; border-radius: var(--radius-small); object-fit: cover; }
.agenda-text { color: var(--muted); font-size: 13px; }

/* Media */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.gallery a, .gallery > div { display: block; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
                             border-radius: var(--radius); color: var(--ink); }
.gallery a:hover { border-color: var(--line-strong); text-decoration: none; }
.gallery img, .gallery video { display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--sunken); object-fit: contain; }
.gallery span { display: block; padding: 7px 10px; font-size: 13px; }
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.files img, .files video { display: block; width: 100%; background: var(--sunken); border-radius: var(--radius-small); }
.files p { margin: 4px 0 0; font-size: 13px; }
img.thumb { display: block; max-height: 76px; border-radius: var(--radius-small); }
.swatch { width: 44px; }

@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .sticky { position: static; }
}
@media (max-width: 760px) {
  .app { display: block; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px;
             padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .nav-label { display: none; }
  .sidebar-foot { margin: 0 0 0 auto; padding: 0; border: 0; }
  .sidebar-foot .email { display: none; }
  main { padding: 18px 16px 48px; }
  .month, .weekdays { display: none; }
  .agenda-item { grid-template-columns: 60px minmax(0, 1fr); }
  .agenda-item > :last-child:not(:nth-child(2)) { grid-column: 2; }
  .row-meta { margin-left: 0; }
}