:root {
  --ink: #1f2a2e; --ink-soft: #4c5b61; --teal: #16606b; --teal-dark: #0e4a53;
  --paper: #fbfaf7; --line: #e2ddd3; --red: #a33c3c;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink); background: var(--paper); line-height: 1.55;
}
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.row { display: flex; align-items: center; gap: .9rem; justify-content: space-between; }
.bar { border-bottom: 1px solid var(--line); padding: .8rem 0; background: #fff; }
.logo { font-weight: 700; } .logo span { color: var(--teal); }
.muted { color: var(--ink-soft); } .small-text { font-size: .85rem; }

.btn { background: var(--teal); color: #fff; border: 0; border-radius: 8px;
  padding: .55rem 1.1rem; font-weight: 600; font-size: .95rem; cursor: pointer; }
.btn:hover { background: var(--teal-dark); }
.btn.quiet { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); }
.btn.danger { background: var(--red); }
.btn.small { padding: .3rem .7rem; font-size: .85rem; }

.center-card { max-width: 26rem; margin: 5rem auto; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; padding: 2rem; text-align: center; }
.center-card h1 { margin-bottom: .5rem; }
.center-card p { margin-bottom: 1.25rem; }

.toolbar { margin: 1.5rem 0 1rem; justify-content: flex-start; }
.toolbar h1 { font-size: 1.4rem; margin-right: auto; }
select { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 6px; }

.cols { display: grid; grid-template-columns: minmax(16rem, 24rem) 1fr;
  gap: 1.25rem; align-items: start; padding-bottom: 3rem; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }

.task-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.task-btn { width: 100%; text-align: left; background: #fff; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem;
  display: flex; flex-direction: column; gap: .25rem; font: inherit; }
.task-btn:hover { border-color: var(--teal); }

.detail { background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 1.4rem; min-height: 12rem; }
.detail h3 { margin: 1.1rem 0 .3rem; font-size: 1rem; }
.artifact { background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: .9rem; white-space: pre-wrap; font-size: .85rem; max-height: 24rem; overflow: auto; }
.actions { margin-top: 1.4rem; display: flex; gap: .6rem; flex-wrap: wrap; }

.pill { display: inline-block; font-size: .72rem; font-weight: 600; border-radius: 999px;
  padding: .1rem .6rem; background: #eee; text-transform: lowercase; }
.pill.PENDING_APPROVAL { background: #fdf1d7; color: #7a5b12; }
.pill.CLOSED, .pill.PASS, .pill.PUBLISHED, .pill.APPROVED { background: #e0efe4; color: #1e5c34; }
.pill.REJECTED, .pill.FAIL { background: #f7dede; color: #7c2626; }
.pill.REVISION_REQUESTED { background: #e3e9f5; color: #2b4a86; }

.status { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; border-radius: 8px; padding: .6rem 1.2rem; }
.status.ok { background: #1e5c34; } .status.err { background: var(--red); }

.btn:disabled { opacity: .55; cursor: progress; }

.tabs { display: flex; gap: .25rem; margin-top: 1.25rem; border-bottom: 1px solid var(--line); }
.tab { background: transparent; border: 0; font: inherit; font-weight: 600; color: var(--ink-soft);
  padding: .5rem 1rem; cursor: pointer; border-bottom: 2.5px solid transparent; }
.tab.active { color: var(--teal-dark); border-bottom-color: var(--teal); }

.activity-note { margin: 1rem 0; }
.activity-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; padding-bottom: 3rem; }
.activity-list li { background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem .9rem; display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; font-size: .92rem; }
.activity-list .when { color: var(--ink-soft); font-size: .8rem; min-width: 9.5rem; }
.activity-list .evt { font-weight: 600; }
.activity-list .evt.approval { color: #1e5c34; }
.activity-list .evt.denied { color: #7c2626; }
.activity-list .evt.created { color: var(--teal-dark); }
.activity-list .task-ref { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--ink-soft); }

[hidden] { display: none !important; }

/* Waiting-patient count on the callbacks tab. Deliberately loud: this is the
   one number on the page that means someone is waiting for a phone call. */
.badge {
  display: inline-block; min-width: 1.35rem; padding: 0 .35rem;
  margin-left: .4rem; border-radius: .7rem;
  background: #b42318; color: #fff;
  font-size: .78rem; font-weight: 700; text-align: center;
}
.callback { padding: .55rem .2rem; }
.callback p { margin: .25rem 0; }

/* Callback actions. The note box sits with the buttons because the note is
   the point — "called, no answer" is a different fact from "called". */
.cb-actions { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.cb-actions .cb-note { flex: 1 1 14rem; padding: .4rem .55rem;
  border: 1px solid #ccc; border-radius: .4rem; font: inherit; }
.cb-log { margin: .45rem 0 0; padding-left: 1rem; font-size: .84rem; color: #555; }
.cb-log li { margin: .15rem 0; }
.callback.done { opacity: .6; }