/* RunMyAgency — agency platform for Around SA Marketing.

   Palette lifted from aroundsamarketing.com: warm cream page, deep navy ink,
   terracotta accent, agave teal. Three colors, each with exactly one job, so
   a glance at a row tells you its state without reading the label:
     navy      structure, headings, primary actions
     teal      confirmed / filed / a strong match
     terracotta needs attention — the review flag, warnings, active nav

   One sans family throughout, following the wordmark: headings are the same
   face set heavier and tracked tighter, body text sits at normal weight. Only
   amounts, dates and invoice numbers break out, into mono with tabular figures,
   so columns align and a wrong digit shows up without hunting. */

:root {
  --paper: #f7f1e7;
  --card: #ffffff;
  --navy: #1c3a4f;
  --navy-soft: #2c5570;
  --muted: #6b7c88;
  --rule: #e6dccd;
  --rule-soft: #f0e9dd;

  --teal: #2f6b66;
  --teal-dim: #e6efed;
  --rust: #be5a2e;
  --rust-dim: #fbeee5;
  --danger: #9e3524;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* Headings follow the wordmark: same family, heavier weight, tighter
     tracking. The serif stack stays defined but unused — one line here would
     bring it back if it were ever wanted. */
  --display: var(--sans);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --radius: 6px;
  --pad: 20px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font: 15px/1.5 var(--sans);
}

.mono, .grid td.mono, kbd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.93em;
}

a { color: var(--teal); }
a:hover { color: #21514d; }

:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- chrome ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  background: var(--card);
  border-bottom: 3px solid var(--navy);
  box-shadow: inset 0 -1px 0 var(--rust);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}

/* ---------- wordmark ----------
   Set in the sans, not the serif. The serif read as ledger and letterhead,
   which suited a filing cabinet; software wants something plainer. The only
   device is weight: Run sits light, MyAgency sits bold, so the camel-case
   compound reads as one word with a natural stress rather than three words
   jammed together. No icon, no gradient, no monogram — the name is short
   enough to be the mark. */

.brand {
  font-family: var(--sans);
  color: var(--navy);
  text-decoration: none;
  padding: 15px 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.wm {
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.025em;
}

.wm-run { font-weight: 400; color: var(--muted); }
.wm-my { font-weight: 700; color: var(--navy); }
.wm-tld { font-weight: 400; color: var(--rust); }

.brand:hover .wm-run { color: var(--navy); }
.brand:hover .wm-my { color: var(--rust); }

.topbar nav {
  display: flex;
  gap: 4px;
  margin-right: auto;
  flex-wrap: wrap;
}

.topbar nav a {
  padding: 17px 12px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
}

.topbar nav a:hover { color: var(--navy); }

.topbar nav a.on {
  color: var(--navy);
  border-bottom-color: var(--rust);
  font-weight: 600;
}

/* Account controls sit as one right-aligned cluster. Source order puts the bell
   before the menu button (which is what mobile needs); `order` moves it into
   the cluster on desktop, so one piece of markup serves both. */
.signout { display: flex; align-items: center; gap: 12px; }
.who { color: var(--muted); font-size: 13px; white-space: nowrap; }

@media (min-width: 861px) {
  .topbar { align-items: center; }
  .brand { order: 1; }
  .topbar nav { order: 2; }
  .bell { order: 3; margin-left: 4px; }
  .signout-desktop { order: 4; margin-left: 14px; }
}

main.app { max-width: 1080px; margin: 0 auto; padding: 28px 24px 80px; }
main.bare { display: grid; place-items: center; min-height: 100vh; padding: 24px; }

.page-title {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 680;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}

/* ---------- panels ---------- */

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--pad);
  margin-bottom: 18px;
}

.panel h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rust);
  font-weight: 700;
  margin: 0 0 14px;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.panel-head h2 { margin-bottom: 14px; }

.note { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.muted { color: var(--muted); }
.empty { color: var(--muted); margin: 0; }
.nowrap { white-space: nowrap; }

/* ---------- stats ---------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.stat {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: block;
  text-decoration: none;
  color: inherit;
}

a.stat:hover { border-color: var(--rust); }

.stat-flag { background: var(--rust-dim); border-color: #eed6c2; }
.stat-flag .stat-n { color: var(--rust); }

.stat-n {
  display: block;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stat-n.mono { font-family: var(--mono); font-size: 25px; }

.stat-l { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }

/* ---------- tables ---------- */

.grid { width: 100%; border-collapse: collapse; font-size: 14px; }

.grid th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  font-weight: 700;
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--rule);
}

.grid td { padding: 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.grid tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: #fdfaf5; }
.grid .r, th.r { text-align: right; }

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

.pill {
  display: inline-block;
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 100px;
  background: #f1ece3;
  color: var(--muted);
  white-space: nowrap;
}

.pill.on { background: var(--teal-dim); color: var(--teal); }
.pill.flag { background: var(--rust-dim); color: var(--rust); }
.pill.bad { background: #f9e7e3; color: var(--danger); }
.err { display: block; font-size: 12px; color: var(--danger); margin-top: 4px; }

/* ---------- forms ---------- */

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 12px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--navy);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 5px;
}

input:focus, select:focus {
  border-color: var(--rust);
  outline: none;
  box-shadow: 0 0 0 3px var(--rust-dim);
}

.stack { max-width: 460px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

form.inline { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
form.inline label { margin: 0; }
form.inline input, form.inline select { margin-top: 0; width: auto; }

button { font: inherit; cursor: pointer; }

.primary, .ghost, .danger {
  display: inline-block;
  padding: 9px 17px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  text-decoration: none;
}

.primary { background: var(--navy); color: #fff; }
.primary:hover { background: #142c3d; color: #fff; }
.primary[disabled] { background: #b3bec6; cursor: not-allowed; }
.wide { width: 100%; }

.ghost { background: var(--card); color: var(--navy); border-color: var(--rule); }
.ghost:hover { border-color: var(--muted); }

.danger { background: var(--card); color: var(--danger); border-color: #e8cdc7; }
.danger:hover { background: #f9e7e3; }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--teal);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.danger-text { color: var(--danger); }
.x { background: none; border: 0; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 2px; }
.x:hover { color: var(--danger); }

kbd {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-size: 11px;
}

.ghost kbd { background: #f1ece3; border-color: var(--rule); color: var(--muted); }

/* ---------- flash ---------- */

.flash {
  padding: 11px 14px;
  border-radius: 5px;
  margin: 0 0 18px;
  font-size: 14px;
  border: 1px solid;
}

.flash.info { background: var(--teal-dim); border-color: #c9dedb; color: #21514d; }
.flash.warn { background: var(--rust-dim); border-color: #eed6c2; color: #8c4020; }
.flash.error { background: #f9e7e3; border-color: #e8cdc7; color: var(--danger); }

/* ---------- login ---------- */

.login {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--rust);
  border-radius: 8px;
  padding: 34px;
  width: 100%;
  max-width: 380px;
}

.login-mark {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.login-mark .wm { font-size: 30px; letter-spacing: -0.03em; }

.login .sub { margin: 6px 0 26px; color: var(--muted); font-size: 14px; }

/* ---------- upload ---------- */

.dropzone { border-style: dashed; border-width: 2px; text-align: center; }
.dropzone.hot { border-color: var(--rust); background: var(--rust-dim); }
.drop-inner { padding: 26px 0 18px; }
.drop-head { font-family: var(--display); font-size: 20px; font-weight: 680; letter-spacing: -0.025em; margin: 0 0 6px; }

.filelist { list-style: none; margin: 18px auto 0; padding: 0; max-width: 440px; text-align: left; }

.filelist li {
  font-family: var(--mono);
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin-bottom: 5px;
  background: var(--card);
  overflow-wrap: anywhere;
}

.results { list-style: none; padding: 0; margin: 0 0 16px; font-size: 14px; }
.results li { padding: 7px 0; border-bottom: 1px solid var(--rule-soft); }
.results li::before { display: inline-block; width: 20px; font-weight: 700; }
.results li.ok::before { content: "\2713"; color: var(--teal); }
.results li.bad::before { content: "!"; color: var(--rust); }

/* ---------- review ---------- */

.review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.review { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: 18px; align-items: start; }

.fields { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0; }
.fields dt { color: var(--muted); font-size: 13px; }
.fields dd { margin: 0; overflow-wrap: anywhere; }
.fields .amount { font-size: 18px; font-weight: 700; }

.pdf-open { display: inline-block; margin-top: 16px; font-size: 14px; }

.match { border-left: 3px solid var(--rule); }
.match.strong { border-left-color: var(--teal); }
.match.weak { border-left-color: var(--rust); }

.verdict {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 680;
  letter-spacing: -0.028em;
  margin: 0 0 6px;
  line-height: 1.3;
}

.verdict .arrow { color: var(--muted); margin: 0 5px; font-weight: 400; }
.verdict .pick { color: var(--rust); font-style: normal; }

.reason { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }
.score { color: var(--navy); background: #f1ece3; padding: 1px 6px; border-radius: 3px; }

.fixup { margin: 4px 0 18px; }
.fixup summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.fixup summary:hover { color: var(--navy); }

.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.actions .danger { margin-left: auto; }

.done { text-align: center; padding: 48px 20px; }
.done-mark { font-family: var(--display); font-size: 24px; font-weight: 680; letter-spacing: -0.03em; margin: 0 0 6px; color: var(--teal); }

/* ---------- misc ---------- */

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 14px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1ece3;
  border-radius: 100px;
  padding: 4px 8px 4px 12px;
  font-size: 13px;
}

.timeline { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.timeline li { padding: 9px 0; border-bottom: 1px solid var(--rule-soft); display: flex; gap: 12px; flex-wrap: wrap; }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { color: var(--muted); font-size: 12px; min-width: 150px; }
.timeline .detail { color: var(--muted); flex-basis: 100%; }

@media (max-width: 820px) {
  .review { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
  main.app { padding: 20px 16px 60px; }
  .topbar { gap: 12px; padding: 0 16px; }
  .topbar nav a { padding: 12px 8px; }
  .actions .danger { margin-left: 0; }
}

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

/* Files screen: the filter bar wraps to its own line on narrow windows and the
   search field takes whatever width is left. */
.filters { width: 100%; }
.filters input[type="search"] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--navy);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 5px;
}
.filters input[type="search"]:focus {
  border-color: var(--rust);
  outline: none;
  box-shadow: 0 0 0 3px var(--rust-dim);
}

/* ---------- phones ----------
   Data tables can't usefully shrink to 390px — squashing them turns amounts
   into two-line wraps and hides the right-hand columns entirely. So on small
   screens the tables keep their real width and scroll sideways inside their
   panel, which keeps every row readable and every column reachable. The nav
   does the same rather than wrapping onto a second line. */

@media (max-width: 640px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 16px;
  }

  .brand { padding: 13px 0 6px; }
  .brand .wm { font-size: 18px; }

  .topbar nav {
    margin: 0 -16px;
    padding: 0 16px 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { padding: 8px 11px 11px; white-space: nowrap; }

  main.app { padding: 18px 14px 60px; }

  .page-title { font-size: 23px; }
  .stat-n { font-size: 25px; }
  .stat-n.mono { font-size: 20px; }
  .stat { padding: 13px 15px; }

  .panel {
    padding: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Below this the columns start colliding, so scroll instead of squashing. */
  .grid { min-width: 560px; }
  .grid th, .grid td { padding: 9px 8px; white-space: nowrap; }
  .grid td:first-child { white-space: normal; min-width: 130px; }

  .filters { flex-direction: column; align-items: stretch; }
  .filters input[type="search"], .filters select, .filters button { width: 100%; }

  .actions { flex-direction: column; align-items: stretch; }
  .actions .primary, .actions .ghost, .actions .danger {
    width: 100%;
    text-align: center;
    margin-left: 0;
  }

  .fields { grid-template-columns: 1fr; gap: 2px 0; }
  .fields dt { margin-top: 9px; }

  .timeline .when { min-width: 0; flex-basis: 100%; }
}

/* ---------- agency commission block ---------- */

.billing {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px;
  margin: 0 0 18px;
  background: #fdfbf7;
}

.billing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.billing-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
}

/* Two states, one control — cheaper to read than a dropdown you have to open. */
.segmented { display: inline-flex; border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; }

.segmented label {
  margin: 0;
  padding: 7px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: var(--card);
  cursor: pointer;
  border-right: 1px solid var(--rule);
}

.segmented label:last-child { border-right: 0; }
.segmented label input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:hover { color: var(--navy); }
.segmented label.on { background: var(--navy); color: #fff; }
.segmented label:focus-within { box-shadow: inset 0 0 0 2px var(--rust); }

.billing-notice {
  border-radius: 5px;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  margin-bottom: 12px;
}

.billing-notice strong { display: block; font-size: 14px; margin-bottom: 2px; }
.billing-notice.grossup { background: var(--rust-dim); color: #8c4020; }
.billing-notice.noadjust { background: var(--teal-dim); color: #21514d; }

.billing-lines { margin: 0; }

.billing-lines .bl {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.billing-lines .bl:last-child { border-bottom: 0; }
.billing-lines dt { color: var(--muted); font-size: 13.5px; margin: 0; }
.billing-lines dd { margin: 0; }

.billing-lines .bl.total dt { color: var(--navy); font-weight: 600; }
.billing-lines .bl.total dd { font-size: 17px; font-weight: 700; }
.billing-lines .bl.total { border-top: 1px solid var(--rule); margin-top: 2px; padding-top: 9px; }

.billing-src { margin-top: 10px; }

/* ---------- expected vs. billed ----------
   Exceptions over noise: the readiness banner says whether you can bill, and
   the table is only worth reading when it says you can't. */

.ready {
  border-radius: 5px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
}

.ready strong { display: block; font-size: 15px; margin-bottom: 3px; }
.ready span { color: inherit; opacity: 0.85; }
.ready-ok { background: var(--teal-dim); color: #21514d; }
.ready-none { background: #f1ece3; color: var(--muted); }
.ready-issues { background: var(--rust-dim); color: #8c4020; }

.ready-issues ul { margin: 8px 0 0; padding-left: 18px; }
.ready-issues li { padding: 2px 0; }
.ready-issues li.sev-high { font-weight: 600; }
.ready-issues li.sev-review { opacity: 0.9; }

.ready-summary {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--teal);
  border-radius: 5px;
  padding: 11px 14px;
  margin-bottom: 18px;
  font-size: 14px;
}

.recon-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 14px;
}

.recon-totals > div {
  background: var(--card);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.recon-totals .rt-l { font-size: 12px; color: var(--muted); }
.recon-totals .rt-v { font-size: 17px; font-weight: 600; }
.recon-totals .rt-total { background: var(--teal-dim); }
.recon-totals .rt-total .rt-v { color: var(--teal); font-size: 19px; font-weight: 700; }

.recon-count { margin: 0 0 12px; }
.recon td.over { color: var(--rust); }
.recon td.under { color: var(--muted); }
.recon-edit { margin-top: 16px; }
.recon-form { margin-bottom: 4px; }

/* ---------- intelligence ----------
   Exceptions over noise. The attention list is the only part of the dashboard
   that shouts; everything else stays quiet and scannable. */

.stat-sub { display: inline-block; margin-left: 4px; font-size: 12px; }
.chip-up { color: var(--rust); font-weight: 600; }
.chip-down { color: var(--teal); font-weight: 600; }
.chip-flat { color: var(--muted); }

.attention { border-left: 3px solid var(--rust); }

/* When there is nothing to act on, the panel's accent turns teal. A rust bar
   beside the words "you're all caught up" says two different things at once. */
.attention:has(.all-clear) { border-left-color: var(--teal); }
.attn-list { list-style: none; margin: 0; padding: 0; }

.attn-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14px;
}

.attn-list li:last-child { border-bottom: 0; }
.attn-list li a { font-weight: 600; white-space: nowrap; }
.attn-list li span { color: var(--muted); }
.attn-list li.sev-high a { color: var(--rust); }
.attn-list li.sev-high span { color: var(--navy); }

/* No inner rule: the panel already carries one on its left edge, and a second
   stripe a few pixels inside it collided with the text. The teal heading is
   enough of a cue that nothing is wrong. */
.all-clear { padding: 2px 0; }
.all-clear strong { display: block; color: var(--teal); font-size: 15px; margin-bottom: 3px; }
.all-clear span { color: var(--muted); font-size: 14px; }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.grid.compact td { padding: 7px 8px; font-size: 14px; }

/* Six bars, no library. */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 150px;
  padding-top: 18px;
}

.chart-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.chart-val {
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 4px;
  white-space: nowrap;
}

.chart-bar {
  width: 100%;
  max-width: 54px;
  background: var(--teal);
  border-radius: 3px 3px 0 0;
  min-height: 0;
}

.chart-col:last-child .chart-bar { background: var(--navy); }

.chart-lab {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.advertiser-facts { margin: -6px 0 18px; }

@media (max-width: 640px) {
  .two-up { grid-template-columns: 1fr; }
  .chart { height: 120px; gap: 5px; }
  .chart-val { font-size: 9px; }
}

.billing-warn {
  background: var(--rust-dim);
  color: #8c4020;
  border-radius: 5px;
  padding: 9px 11px;
  font-size: 13px;
  margin: 10px 0 0;
}

.billing-src span { display: block; }
.billing-src span + span { margin-top: 3px; opacity: 0.85; }

/* Top clients / top advertisers sit side by side, so they share a rhythm:
   same row height, same three columns, name / count / money. */
.panel-hint {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.grid.rank td { padding: 9px 8px; }
.grid.rank td:first-child { font-weight: 600; width: 45%; }
.grid.rank td:nth-child(2) { font-size: 13px; white-space: nowrap; }
.grid.rank tr:last-child td { border-bottom: 0; }

/* Invoice numbers link to their PDF. Kept in mono so columns still align, and
   underlined only on hover so a table of them doesn't turn into a wall of
   blue rules. */
.grid td.mono a,
.fields dd.mono a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px dotted rgba(47, 107, 102, 0.45);
}

.grid td.mono a:hover,
.fields dd.mono a:hover {
  color: #21514d;
  border-bottom-style: solid;
}

/* ---------- LUKE ----------
   A transcript, not a chat app. No bubbles, no avatars, no typing animation —
   this is financial software and the answer is the point. Speaker labels sit
   in the margin so a column of answers reads like a document. */

.luke-head { margin-bottom: 18px; }
.luke-head .page-title { margin-bottom: 2px; }

.luke {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--pad);
}

.luke-log { min-height: 220px; }

.luke-intro { padding: 14px 0 6px; }
.luke-intro-lead { font-family: var(--display); font-size: 21px; font-weight: 680; letter-spacing: -0.025em; margin: 0 0 6px; }

.luke-suggestions {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 18px 0 0;
}

.luke-chip {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--navy);
  cursor: pointer;
}

.luke-chip:hover { border-color: var(--teal); color: var(--teal); }

.luke-msg {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.luke-msg:last-child { border-bottom: 0; }

.luke-who {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted);
  padding-top: 3px;
}

.luke-assistant .luke-who { color: var(--teal); }
.luke-body { font-size: 14.5px; line-height: 1.55; min-width: 0; }
.luke-body p { margin: 0 0 9px; }
.luke-body p:last-child { margin-bottom: 0; }
.luke-body ul { margin: 0 0 9px; padding-left: 18px; }
.luke-body li { padding: 2px 0; }
.luke-body strong { font-weight: 650; }
.luke-pending .luke-body { color: var(--muted); font-style: italic; }

.luke-compose {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.luke-compose input {
  flex: 1 1 auto;
  margin-top: 0;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--navy);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 5px;
}

.luke-compose input:focus {
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 3px var(--teal-dim);
}

.luke-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .luke-msg { grid-template-columns: 1fr; gap: 4px; }
  .luke-compose input { font-size: 16px; }
}

/* ---------- LUKE AI wordmark ----------
   The one place in RunMyAgency allowed to draw attention to itself. It earns that
   by being the only nav item that isn't a noun for a pile of paperwork.
   Wide-tracked caps for LUKE, then AI set small and raised in terracotta —
   the same trick the Around SA logo uses on its divider. No glow, no gradient:
   this is still financial software. */

.luke-mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.luke-ai {
  font-family: var(--sans);
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: super;
  margin-left: 3px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--rust);
  color: #fff;
  text-transform: uppercase;
}

.topbar nav a .luke-mark { color: var(--navy); }
.topbar nav a:hover .luke-mark { color: var(--rust); }
.topbar nav a.on .luke-mark { color: var(--navy); }

/* The page heading uses the same wordmark, sized up. */
.luke-title { letter-spacing: -0.02em; }
.luke-title .luke-ai { font-size: 0.4em; padding: 2px 6px; vertical-align: super; }

/* ---------- dashboard greeting ----------
   A greeting is a courtesy, not a headline. It sits at page-title weight and
   no larger, so it never competes with the figures underneath it — which are
   the actual reason anyone opened this page. */

/* The stamp sits with the greeting rather than under it, so the two read as
   one masthead and the figures below start where they always did. Kept small
   and slightly faded: it is a mark of ownership, not a banner. */
.greeting-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

.greeting-text { min-width: 0; }

.greeting-stamp {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  opacity: 0.92;
}

@media (max-width: 640px) {
  .greeting-head { gap: 12px; }
  .greeting-stamp { width: 54px; height: 54px; }
}

.greeting {
  margin: 0 0 3px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.greeting-sub {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- agency bulletin ----------
   An announcement board, not a chat. Posts read as a short list of notices:
   author, when, text. No avatars, no bubbles, no reply affordances — the
   absence of those is what keeps it from becoming a messaging app. */

.bulletin { margin-top: 4px; }

.blist { list-style: none; margin: 0; padding: 0; }

.bpost {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.bpost:last-child { border-bottom: 0; }

.bpost.pinned {
  background: var(--paper);
  border-left: 2px solid var(--rust);
  padding-left: 12px;
  margin-bottom: 4px;
  border-radius: 0 4px 4px 0;
}

.bmeta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 13px;
  margin-bottom: 4px;
}

.bauthor { font-weight: 650; color: var(--navy); }
.bdot, .bwhen { color: var(--muted); }

.bpin {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--rust);
  background: var(--rust-dim);
  border-radius: 3px;
  padding: 1px 6px;
}

.bactions { margin-left: auto; display: flex; gap: 12px; font-size: 13px; }
.bpost:not(:hover) .bactions { opacity: 0.45; }
.bactions { transition: opacity 0.12s ease; }

.bbody { margin: 0; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }

.bcompose { margin-top: 14px; }

.bnew {
  cursor: pointer;
  font-size: 14px;
  color: var(--teal);
  list-style: none;
  display: inline-block;
}

.bnew::-webkit-details-marker { display: none; }
.bnew:hover { color: #21514d; }

.bform { margin-top: 12px; max-width: 560px; }
.bfield { font-size: 13px; color: var(--muted); }

.bform textarea {
  display: block;
  width: 100%;
  margin: 5px 0 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--navy);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 5px;
  resize: vertical;
}

.bform textarea:focus {
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 3px var(--teal-dim);
}

@media (prefers-reduced-motion: reduce) {
  .bactions { transition: none; }
}

/* ---------- beta label ----------
   Set in sentence case rather than shouting caps, in muted ink on a tinted
   ground. A red or amber badge would read as a warning about the software's
   reliability, which is the opposite of the intended message — this says
   "still being built", not "be careful". Sits on the wordmark's baseline
   rather than superscripted, so the header keeps one clean line. */

.beta {
  display: inline-block;
  margin-left: 9px;
  padding: 2px 7px;
  border-radius: 3px;
  background: #eef1f4;
  border: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
  line-height: 1.35;
}

.brand:hover .beta { color: var(--navy); border-color: var(--muted); }

.beta-lg {
  font-size: 11px;
  padding: 3px 8px;
  vertical-align: 5px;
  margin-left: 10px;
}

@media (max-width: 640px) {
  .beta {
    margin-left: 6px;
    padding: 1px 5px;
    font-size: 9.5px;
    vertical-align: 2px;
  }
}

/* ---------- calendar ----------
   The month grid answers "what does this month look like"; the agenda list
   below answers "what exactly is happening". On a phone the grid keeps only
   the shape — a day number and a count — and the agenda does the reading,
   because a 40px cell cannot hold "Marco Crawford Monthly Meeting". */

.cal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.cal-nav { display: flex; gap: 8px; }
.cal-nav .ghost { padding: 7px 14px; font-size: 14px; }

.cal-panel { padding: 12px; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-radius: 5px;
  overflow: hidden;
}

.cal-weekday {
  background: var(--card);
  padding: 8px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

.cal-cell {
  position: relative;
  background: var(--card);
  min-height: 96px;
  padding: 6px;
}

.cal-cell.empty { background: #fbf9f5; }
.cal-day { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.cal-cell.is-today { background: var(--teal-dim); }
.cal-cell.is-today .cal-day { color: var(--teal); font-weight: 700; }

.cal-events { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }

.evpill {
  display: block;
  font-size: 11.5px;
  line-height: 1.3;
  padding: 3px 5px;
  border-radius: 3px;
  background: #eef1f4;
  border-left: 2px solid var(--muted);
  color: var(--navy);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evpill:hover { background: var(--paper); color: var(--navy); }
.evpill .evtime { color: var(--muted); margin-right: 4px; font-size: 10.5px; }

/* Type is carried by a single edge stripe. A fully colour-coded grid becomes
   noise the moment there are more than a few events. */
.evpill.type-client_meeting { border-left-color: var(--teal); }
.evpill.type-internal_meeting { border-left-color: var(--navy-soft); }
.evpill.type-content_shoot { border-left-color: var(--rust); }
.evpill.type-deadline { border-left-color: var(--danger); }
.evpill.type-event { border-left-color: var(--teal); }

.cal-dot { display: none; }

.agenda { list-style: none; margin: 0; padding: 0; }

.agenda li {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.agenda li:last-child { border-bottom: 0; }
.ag-date { color: var(--muted); font-size: 13px; min-width: 46px; padding-top: 1px; }
.ag-main { min-width: 0; }
.ag-title { display: block; font-weight: 600; font-size: 14.5px; }
.ag-meta { color: var(--muted); font-size: 13px; }

/* ---------- event form and detail ---------- */

.evform { max-width: 520px; margin-top: 12px; }
.evform textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 9px 11px;
  font: inherit;
  font-size: 14.5px;
  color: var(--navy);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 5px;
  resize: vertical;
}
.evform textarea:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px var(--teal-dim); }
.evallday { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--navy); }
.evallday input { width: auto; margin: 0; }
.optional { color: var(--muted); font-weight: 400; font-size: 12px; }

.ev-when { font-family: var(--display); font-size: 19px; font-weight: 680; letter-spacing: -0.02em; margin: 0 0 16px; line-height: 1.35; }
.ev-time { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--teal); }
.ev-join { margin-top: 16px; }
.ev-delete { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }

/* ---------- dashboard upcoming ---------- */

.upnext { list-style: none; margin: 0; padding: 0; }

.upnext li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14px;
}

.upnext li:last-child { border-bottom: 0; }
.up-when { font-weight: 650; color: var(--navy); font-size: 13px; }
.up-time { color: var(--muted); font-size: 13px; }
.up-title { grid-column: 1 / -1; font-weight: 600; }
.up-client { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }

@media (max-width: 720px) {
  .cal-cell { min-height: 52px; padding: 4px 2px; text-align: center; }
  .cal-events { display: none; }
  .cal-cell.has-events .cal-dot {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--teal);
    border-radius: 100px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    margin: 3px auto 0;
  }
  .cal-panel { padding: 8px; }
  .cal-weekday { padding: 6px 2px; font-size: 10px; }
}

/* ==========================================================================
   RESPONSIVE FOUNDATION
   Loaded last so it settles anything above it.

   THE ACTUAL CAUSE of the app-wide horizontal scroll: grid and flex items
   default to `min-width: auto`, which means they refuse to shrink below their
   content. A table carrying `min-width: 560px` sat inside a two-column grid,
   the column could not shrink, and the whole document grew to fit — producing
   the empty space to the right of every page. Fixing it once here means new
   features inherit the behaviour instead of each needing its own patch.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must win.
   Its default (display: none) comes from the browser stylesheet, so ANY later
   rule setting display — grid, flex, block — silently overrides it and the
   element stays on screen. That is what put the preview overlay permanently
   over the Content page. Declared once, so no future component can trip on it. */
[hidden] { display: none !important; }

/* Nothing may quietly widen the page. Scrolling belongs to the element that
   needs it, never to the document. */
html, body {
  max-width: 100%;
  overflow-x: clip; /* a backstop, not the fix — the causes are handled below */
}

/* Grid and flex children shrink to their container by default. */
.stat-row > *,
.two-up > *,
.review > *,
.pair > *,
.recon-totals > *,
.luke-msg > *,
.cal-grid > *,
.agenda li > *,
.upnext > li > *,
.bmeta > *,
.greeting-head > * { min-width: 0; }

/* Media and embedded content never exceed their box. */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

/* Long unbroken strings — URLs, file names, vendor codes — wrap instead of
   stretching their container. */
.bbody, .luke-body, .ag-title, .up-title, .fields dd, .empty, .note,
.attn-list li span, .ready li, td, .evpill { overflow-wrap: anywhere; }

/* Tables scroll inside their own panel at every width, so a wide table can
   never reach the document. */
.panel { overflow-x: auto; }
.grid { width: 100%; }

/* Form controls are bounded by their parent, never by their content. */
input, select, textarea, button { max-width: 100%; }

/* ---------- mobile navigation ----------
   Nine destinations will not fit across a phone, and a horizontally scrolling
   nav hides half of them behind a gesture nobody discovers. Below 860px the
   bar collapses to the wordmark plus a menu button. Built on a checkbox rather
   than JavaScript, so the menu still opens if a script fails. */

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-button { display: none; }

@media (max-width: 860px) {
  .topbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 16px;
    gap: 0;
  }

  .brand { padding: 14px 0; margin-right: auto; }

  .nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 -8px 0 8px;
    border-radius: 5px;
    cursor: pointer;
  }

  .nav-button:hover { background: var(--paper); }

  /* Three bars drawn from one element. */
  .nav-bars,
  .nav-bars::before,
  .nav-bars::after {
    content: '';
    display: block;
    width: 19px;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
    position: relative;
  }

  .nav-bars::before { position: absolute; top: -6px; }
  .nav-bars::after { position: absolute; top: 6px; }

  .nav-toggle:focus-visible + .nav-button { outline: 2px solid var(--rust); outline-offset: 2px; }

  .topbar nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    margin: 0 -16px;
    padding: 6px 0 10px;
    border-top: 1px solid var(--rule);
    overflow: visible;
  }

  .nav-toggle:checked ~ nav { display: flex; }

  .topbar nav a {
    padding: 12px 16px;
    border-bottom: 0;
    border-left: 3px solid transparent;
    font-size: 15px;
    white-space: normal;
  }

  .topbar nav a.on {
    border-bottom-color: transparent;
    border-left-color: var(--rust);
    background: var(--paper);
  }

  /* Sign-out lives in the menu on mobile, in the bar on desktop. */
  .signout-desktop { display: none; }

  .topbar nav .signout {
    padding: 12px 16px;
    margin-top: 4px;
    border-top: 1px solid var(--rule-soft);
    justify-content: space-between;
  }
}

@media (min-width: 861px) {
  .topbar nav .signout { display: none; }
}

/* ---------- layout at phone widths ---------- */

@media (max-width: 720px) {
  .two-up { grid-template-columns: 1fr; }
  .review { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  main.app { padding: 16px 12px 60px; }
  .panel { padding: 14px 12px; }
  .stat-row { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px; }
  .stat { padding: 12px 13px; }
  .stat-n { font-size: 22px; }
  .stat-n.mono { font-size: 18px; }
  .page-title { font-size: 21px; }

  /* Two columns while they stay readable, one when they would not. */
  .recon-totals { grid-template-columns: 1fr 1fr; }
  .recon-totals .rt-total { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .recon-totals { grid-template-columns: 1fr; }
  .brand .wm { font-size: 16px; }
}

/* Charts fill whatever width they are given. */
.chart { width: 100%; min-width: 0; }
.chart-col { min-width: 0; }

/* ---------- bulletin images ---------- */

.bimages { display: grid; gap: 6px; margin-top: 10px; max-width: 480px; }
.bimages.count-1 { grid-template-columns: 1fr; }
.bimages.count-2 { grid-template-columns: 1fr 1fr; }
.bimages.count-3, .bimages.count-4 { grid-template-columns: 1fr 1fr; }

.bimg {
  display: block;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper);
  line-height: 0;
}

/* A fixed aspect box keeps the grid tidy while object-fit preserves the
   picture's own proportions — cropped for the thumbnail, never stretched.
   The full image opens at its true size when tapped. */
.bimages.count-1 .bimg img { max-height: 260px; width: 100%; object-fit: cover; }
.bimages.count-2 .bimg img,
.bimages.count-3 .bimg img,
.bimages.count-4 .bimg img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }

.bimg img { display: block; }
.bimg:hover { border-color: var(--teal); }

.bupload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.bpick { cursor: pointer; padding: 7px 14px; font-size: 13.5px; }
.bpicked { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .bimages { max-width: 100%; }
  .bimages.count-1 .bimg img { max-height: 200px; }
}

/* ---------- client tabs ---------- */

.ctabs {
  display: flex;
  gap: 2px;
  margin: -8px 0 18px;
  border-bottom: 1px solid var(--rule);
}

.ctabs a {
  padding: 9px 16px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.ctabs a:hover { color: var(--navy); }
.ctabs a.on { color: var(--navy); font-weight: 620; border-bottom-color: var(--rust); }

/* ---------- content summary + filters ---------- */

.csummary { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cs-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.cs-figures { display: flex; gap: 18px; margin-top: 6px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.cs-figures strong { font-size: 20px; color: var(--navy); font-weight: 700; margin-right: 3px; }
.cs-remaining strong { color: var(--rust); }

.cfilters { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cfilter-row { display: flex; gap: 4px; flex-wrap: wrap; }

.cfilter {
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
}

.cfilter:hover { color: var(--navy); background: var(--paper); }
.cfilter.on { background: var(--navy); color: #fff; font-weight: 600; }
.cfcount { opacity: 0.7; margin-left: 3px; }
.cfilter-form input[type="search"] { padding: 7px 10px; border: 1px solid var(--rule); border-radius: 5px; font: inherit; font-size: 14px; }

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

.cgrid {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.ccard {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cthumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  padding: 0;
  background: var(--paper);
  cursor: pointer;
  overflow: hidden;
}

.cthumb img { width: 100%; height: 100%; object-fit: cover; display: none; }
.cthumb img.loaded { display: block; }
.cthumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; opacity: 0.35; }
.cthumb img.loaded ~ .cthumb-fallback { display: none; }

.cplay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 100px;
  background: rgba(28, 58, 79, 0.72);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  padding-left: 3px;
}

.cbody { padding: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmeta-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ctype { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ctitle { margin: 2px 0 0; font-weight: 620; font-size: 14.5px; overflow-wrap: anywhere; }
.ccampaign { margin: 0; font-size: 13px; color: var(--teal); }
.cmeta { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.cposted { margin: 4px 0 0; font-size: 12.5px; color: var(--teal); overflow-wrap: anywhere; }

.cactions { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.cmark { display: block; text-align: center; cursor: pointer; list-style: none; font-size: 13.5px; padding: 8px 12px; }
.cmark::-webkit-details-marker { display: none; }
.cpostform, .ceditform { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
.cpostform label, .ceditform label { font-size: 12.5px; }
.cplatforms { border: 0; padding: 0; margin: 0 0 12px; }
.cplatforms legend { font-size: 12.5px; color: var(--muted); padding: 0; margin-bottom: 5px; }
.cplat { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: 13.5px; color: var(--navy); }
.cplat input { width: auto; margin: 0; }
.cedit summary { cursor: pointer; font-size: 13px; list-style: none; }
.cedit summary::-webkit-details-marker { display: none; }
.cready { margin-top: 8px; }
.ceditform textarea { width: 100%; margin-top: 5px; padding: 7px 9px; font: inherit; font-size: 13.5px; border: 1px solid var(--rule); border-radius: 5px; resize: vertical; }

/* ---------- uploader ---------- */

.cupload-open { white-space: nowrap; }

.cdrop {
  border: 2px dashed var(--rule);
  border-radius: var(--radius);
  padding: 26px 16px;
  text-align: center;
  margin-bottom: 16px;
}

.cdrop.hot { border-color: var(--teal); background: var(--teal-dim); }
.cshared { margin-bottom: 14px; }

.cqueue { list-style: none; margin: 0 0 14px; padding: 0; }

.cqitem {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13.5px;
}

.cq-name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.cq-size { color: var(--muted); font-size: 12.5px; }
.cq-bar { grid-column: 1 / -1; height: 4px; background: var(--rule-soft); border-radius: 3px; overflow: hidden; }
.cq-fill { display: block; height: 100%; background: var(--teal); width: 0; transition: width 0.2s ease; }
.cq-state { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.state-done .cq-state { color: var(--teal); font-weight: 600; }
.state-done .cq-fill { background: var(--teal); }
.state-failed .cq-state { color: var(--danger); font-weight: 600; }
.state-failed .cq-fill { background: var(--danger); }

.cupload-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cqstatus { font-size: 13.5px; color: var(--muted); }

/* ---------- preview ---------- */

.clightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 30, 40, 0.88);
  display: grid;
  place-items: center;
  padding: 20px;
}

.clb-stage { max-width: min(1000px, calc(100vw - 40px)); max-height: calc(100vh - 80px); }
.clb-stage img, .clb-stage video { max-width: 100%; max-height: calc(100vh - 80px); border-radius: 5px; display: block; }
.clb-loading { color: #fff; font-size: 15px; }

.clb-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 560px) {
  .cgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cbody { padding: 9px; }
  .ctitle { font-size: 13.5px; }
  .csummary { flex-direction: column; align-items: stretch; }
  .cupload-open { width: 100%; }
  .cfilters { flex-direction: column; align-items: stretch; }
  .cfilter-form { flex-direction: column; align-items: stretch; }
  .cfilter-form input, .cfilter-form select, .cfilter-form button { width: 100%; }
  .clb-stage { max-width: calc(100vw - 24px); }
}

@media (max-width: 380px) {
  .cgrid { grid-template-columns: 1fr; }
}

/* ---------- processing progress ----------
   Determinate while bytes are moving, because a real percentage is honest and
   useful. Indeterminate once the AI is reading, because inventing a percentage
   for work with no measurable progress is a lie the user eventually notices. */

.proclist { list-style: none; margin: 0 0 18px; padding: 0; }
.proclist:empty { display: none; }

.procitem {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  font-size: 14px;
}

.proc-name { font-weight: 620; overflow-wrap: anywhere; min-width: 0; }
.proc-state { font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; }
.proc-bar {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--rule-soft);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 2px;
}

.proc-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--teal);
  transition: width 0.25s ease;
}

/* No percentage claimed — just motion, so it reads as "working". */
.proc-bar.indeterminate .proc-fill {
  width: 40% !important;
  animation: procslide 1.15s ease-in-out infinite;
}

@keyframes procslide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.state-ready .proc-fill { background: var(--teal); }
.state-ready .proc-state { color: var(--teal); font-weight: 620; }
.state-duplicate .proc-fill { background: var(--muted); }
.state-failed .proc-fill { background: var(--danger); }
.state-failed .proc-state { color: var(--danger); font-weight: 620; }

.proc-actions { grid-column: 1 / -1; display: flex; gap: 14px; font-size: 13px; margin-top: 4px; }
.upload-next { text-align: center; padding: 26px 20px; }

@media (prefers-reduced-motion: reduce) {
  .proc-bar.indeterminate .proc-fill { animation: none; width: 100% !important; opacity: 0.5; }
  .proc-fill { transition: none; }
}

@media (max-width: 560px) {
  .proc-state { text-align: left; grid-column: 1 / -1; }
}

/* ---------- invoice roles ----------
   Vendor, advertiser and client shown as three separate rows. They are three
   different businesses in three different roles, and collapsing them into one
   arrow is what made the client look like the vendor's property. */

.roles { margin: 0 0 16px; }

.role {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 4px 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.role:last-child { border-bottom: 0; }
.role dt { font-size: 12.5px; color: var(--muted); }
.role dd { margin: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.role dd strong { font-weight: 650; }

.role-match, .role-none {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 1px;
}

.role-ok dd strong { color: var(--teal); }
.role-open dd .pick { color: var(--rust); }
.role-open { background: var(--rust-dim); border-radius: 4px; padding: 8px 10px; }

@media (max-width: 560px) {
  .role { grid-template-columns: 1fr; gap: 1px; }
}

/* A probable match is filled in but flagged — different from both a confident
   match and no match at all. */
.role-check { background: var(--rust-dim); border-radius: 4px; padding: 8px 10px; }
.role-check dd strong { color: #8c4020; }

/* Date and time under the greeting. Set at body size rather than heading size:
   it is orientation, not news. */
.greeting-date {
  margin: 2px 0 0;
  font-size: 14.5px;
  color: var(--navy);
}

.greeting-time {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .greeting-time { display: block; margin: 2px 0 0; }
}

/* ---------- my agenda ----------
   A checklist, not a project tool. One line per task, a large tap target for
   the only action that matters, and details hidden until asked for. */

.agsummary { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

.ag-progress {
  flex: 1 1 160px;
  max-width: 260px;
  height: 6px;
  background: var(--rule-soft);
  border-radius: 4px;
  overflow: hidden;
}

.ag-progress-fill { display: block; height: 100%; background: var(--teal); transition: width 0.3s ease; }

.agsection .panel-head { align-items: center; }
.ag-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.aglist { list-style: none; margin: 0; padding: 0; }

.agitem {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}

.agitem:last-child { border-bottom: 0; }
.ag-check-form { display: block; }

/* Deliberately large: this is the one control people use all day, often on a
   phone, often in a hurry. */
.ag-check {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 2px solid var(--rule);
  background: var(--card);
  color: transparent;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.ag-check:hover { border-color: var(--teal); }
.ag-check.on { background: var(--teal); border-color: var(--teal); color: #fff; }

.ag-main { min-width: 0; }
.ag-title { margin: 2px 0 0; font-size: 15px; font-weight: 560; overflow-wrap: anywhere; }
.done .ag-title { color: var(--muted); text-decoration: line-through; }

.ag-meta { margin: 3px 0 0; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.ag-flag { color: var(--rust); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
.overdue .ag-due { color: var(--rust); font-weight: 600; }
.ag-repeat { color: var(--teal); }

.ag-more { margin-top: 6px; }
.ag-more summary { cursor: pointer; font-size: 12.5px; color: var(--muted); list-style: none; }
.ag-more summary::-webkit-details-marker { display: none; }
.ag-more summary:hover { color: var(--navy); }
.ag-notes { margin: 8px 0; font-size: 13.5px; }
.ag-form { margin: 8px 12px 0 0; }
.ag-form input[type="date"] { padding: 5px 8px; font-size: 13px; }
.ag-repeat-field { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--navy); padding-top: 22px; }
.ag-repeat-field input { width: auto; margin: 0; }

.agnotify { border-left: 3px solid var(--teal); }
.agnotify-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.agnotify-list li { padding: 5px 0; }

.agwidget .aglist.compact .agitem { padding: 8px 0; }
.ag-remaining { margin: 0 0 8px; font-size: 13.5px; color: var(--muted); }

@media (max-width: 560px) {
  .ag-check { width: 30px; height: 30px; }
  .agsummary { flex-direction: column; align-items: stretch; }
  .ag-progress { max-width: none; }
  .ag-repeat-field { padding-top: 0; }
}

/* ---------- LUKE command bar ----------
   Sits between the greeting and the numbers, framed like a field rather than a
   floating chat bubble — it belongs to the page, not on top of it. */

.askbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: 8px 10px 8px 14px;
  margin-bottom: 18px;
}

.askbar-mark {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.askbar input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--navy);
  padding: 8px 4px;
}

.askbar input:focus { outline: none; box-shadow: none; }
.askbar:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
.askbar-go { padding: 8px 16px; font-size: 14px; white-space: nowrap; }

/* ---------- attention list ---------- */

.attn-list li {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 4px 14px;
  align-items: baseline;
}

.attn-kind {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--muted);
}

.attn-text { color: var(--navy); }
.attn-go { font-size: 13px; white-space: nowrap; }

/* Financial figures sit inside their section rather than floating at page level. */
.stat-row.inset { margin-bottom: 12px; }
.stat-row.inset .stat { border: 0; background: var(--paper); }

/* ---------- client snapshot ---------- */

.clientsnap { list-style: none; margin: 0; padding: 0; }

.clientsnap li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.clientsnap li:last-child { border-bottom: 0; }
.cs-name { font-weight: 620; font-size: 14.5px; }
.cs-sub { grid-column: 1; font-size: 13px; color: var(--muted); }
.cs-amt { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 15px; font-weight: 600; }

@media (max-width: 640px) {
  .askbar { flex-wrap: wrap; padding: 10px 12px; border-left-width: 3px; }
  .askbar-mark { order: 1; }
  .askbar-go { order: 3; width: 100%; }
  .askbar input { order: 2; flex-basis: 100%; font-size: 16px; padding: 6px 0; }
  .attn-list li { grid-template-columns: 1fr; gap: 2px; }
  .attn-go { justify-self: start; }
}

/* ---------- notification bell ---------- */

.bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 5px;
  color: var(--muted);
  text-decoration: none;
  margin-left: 6px;
}

.bell:hover { color: var(--navy); background: var(--paper); }

.bell-count {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 100px;
  background: var(--rust);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* ---------- notifications page ---------- */

.notif-state { font-size: 15px; color: var(--navy); margin: 0 0 12px; }
.notif-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.notif-pref { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--navy); margin-bottom: 10px; }
.notif-pref input { width: auto; margin: 0; }

.notif-list { list-style: none; margin: 0; padding: 0; }

.notif-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14px;
}

.notif-list li:last-child { border-bottom: 0; }
.notif-list li.unread .notif-msg { font-weight: 620; }

.notif-kind {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--muted);
}

.notif-msg { color: var(--navy); text-decoration: none; overflow-wrap: anywhere; }
.notif-msg:hover { color: var(--teal); }
.notif-when { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

@media (max-width: 860px) {
  /* The brand pushes everything right; bell and menu button sit together, and
     the name and Sign out live inside the menu instead of under the bell. */
  .bell { order: 2; margin-left: 0; }
  .nav-button { order: 3; }
  .topbar nav { order: 4; }
}

@media (max-width: 560px) {
  .notif-list li { grid-template-columns: 1fr; gap: 2px; }
  .notif-when { grid-row: 1; justify-self: end; }
}