/* Conversations page (#journal): the chat list beside one chat. The list and the chat scroll
   separately. */

/* ==== Chat list ==== */

main[data-page='journal'] .journal-layout {
  display: grid;
  flex: 1;
  grid-template-columns: 264px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--s8);
  min-height: 0;
  padding-left: calc(var(--page-padding-x) - var(--s8));
}
main[data-page='journal'] .session-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--page-padding-top) var(--s8) var(--s48);
  overflow-y: auto;
  overscroll-behavior: contain;
}
main[data-page='journal'] .session-day {
  margin: var(--s24) 0 var(--s8);
  padding: 0 var(--s16);
  color: var(--muted);
  font-size: var(--text-12);
  line-height: var(--leading-16);
  font-weight: 600;
  letter-spacing: 0;
}
main[data-page='journal'] .session-day:first-child {
  margin-top: var(--s8);
}
main[data-page='journal'] .session-item {
  width: 100%;
  padding: var(--s12) var(--s16);
  border: 1px solid transparent;
  border-radius: var(--radius-12);
  text-align: left;
}
main[data-page='journal'] .session-item.selected {
  border-color: #d0ddf4;
  background: var(--sky);
}
main[data-page='journal'] .session-item:hover {
  background: #f0ece2;
}
main[data-page='journal'] .session-item .session-line {
  display: flex;
  align-items: center;
  gap: var(--s8);
  margin: 0;
  color: var(--ink);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='journal'] .session-item strong {
  display: flex;
  align-items: center;
  gap: var(--s8);
}
main[data-page='journal'] .session-item small {
  margin-top: var(--s2);
  color: var(--muted);
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
/* The latest review summary, cut to two lines. */
main[data-page='journal'] .session-item .session-snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: var(--s4);
  color: var(--subtle);
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
main[data-page='journal'] .live-tag,
main[data-page='journal'] .flag-tag {
  margin-left: auto;
  padding: var(--s2) var(--s8);
  border-radius: var(--radius-pill);
  font-size: var(--text-12);
  line-height: var(--leading-16);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}
main[data-page='journal'] .live-tag {
  background: var(--sky-strong);
  color: var(--blue);
}
main[data-page='journal'] .flag-tag {
  background: #f5e3d4;
  color: var(--warning-text);
}

/* ==== Chat header ==== */

/* Rows keep their content height; otherwise a long chat squeezes the last row. */
main[data-page='journal'] .journal-detail {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: var(--s16);
  padding: var(--page-padding-top) var(--page-padding-x) var(--s48) var(--s8);
  overflow-y: auto;
  overscroll-behavior: contain;
}
main[data-page='journal'] .journal-detail > * {
  max-width: 1040px;
}
main[data-page='journal'] .back-row {
  display: none;
}
main[data-page='journal'] .chat-head {
  padding: var(--s8) 0;
}
main[data-page='journal'] .chat-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s16);
}
main[data-page='journal'] .chat-title h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s12);
}
main[data-page='journal'] .chat-title .live-tag {
  margin: 0;
}
main[data-page='journal'] .chat-meta {
  margin-top: var(--s4);
  color: var(--muted);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='journal'] .chat-notes {
  display: grid;
  gap: var(--s4);
  margin: var(--s12) 0 0;
  padding: 0;
  list-style: none;
  color: #8a6a4f;
  font-size: var(--text-14);
  line-height: var(--leading-20);
}

/* ==== Summary or Log ==== */

main[data-page='journal'] .chat-views {
  display: flex;
  gap: var(--s4);
  width: fit-content;
  padding: var(--s4);
  border-radius: var(--radius-12);
  background: #eeeae0;
}
main[data-page='journal'] .chat-views button {
  padding: var(--s4) var(--s16);
  border-radius: var(--radius-8);
  color: var(--tab-text);
  font-size: var(--text-14);
  line-height: var(--leading-24);
  font-weight: 600;
}
main[data-page='journal'] .chat-views button[aria-pressed='true'] {
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 1px 4px #18234a12;
}

/* ==== Section cards ==== */

main[data-page='journal'] .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s16);
}
main[data-page='journal'] .section-head h3 {
  margin: 0;
  font-size: var(--text-16);
  line-height: var(--leading-24);
  letter-spacing: var(--tracking-16);
}
main[data-page='journal'] .section-head span {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: var(--leading-24);
  white-space: nowrap;
}
main[data-page='journal'] .checks-card {
  padding: var(--s16) var(--s24);
}
main[data-page='journal'] .checks-card:not(.flagged) .section-head span {
  color: var(--blue);
}
/* A match the parent is alerted to, one that ended the chat, or checks that could not be run. */
main[data-page='journal'] .checks-card.flagged {
  border-color: var(--warning-border);
  background: var(--warning-surface);
}
main[data-page='journal'] .checks-card.flagged .section-head span {
  color: var(--red);
  font-weight: 600;
}
main[data-page='journal'] .match-list {
  margin: var(--s8) 0 0;
  padding: 0;
  list-style: none;
}
main[data-page='journal'] .match-list li {
  padding: var(--s12) 0 var(--s4);
  border-top: var(--border);
}
main[data-page='journal'] .flagged .match-list li {
  border-top: 1px solid #ecd5c1;
}
main[data-page='journal'] .match-list li + li {
  margin-top: var(--s8);
}
main[data-page='journal'] .match-list p {
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='journal'] .flagged .match-list p {
  color: var(--warning-ink);
}
main[data-page='journal'] .match-list small {
  margin-top: var(--s4);
  color: var(--muted);
}
main[data-page='journal'] .flagged .match-list small {
  color: #8c6b55;
}

/* ==== Goal progress ==== */

main[data-page='journal'] .review-summary {
  margin-top: var(--s8);
  font-size: var(--text-18);
  line-height: var(--leading-28);
  font-weight: 600;
  letter-spacing: var(--tracking-18);
}
main[data-page='journal'] .goal-list {
  margin-top: var(--s16);
  border-top: var(--border);
}
main[data-page='journal'] .observation {
  padding: var(--s16) 0;
  border-bottom: var(--border);
}
main[data-page='journal'] .observation.quiet {
  padding: var(--s12) 0;
}
main[data-page='journal'] .observation-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s16);
}
main[data-page='journal'] .observation-title strong,
main[data-page='journal'] .observation-title > span:first-child {
  font-size: var(--text-14);
  line-height: var(--leading-24);
}
main[data-page='journal'] .observation.quiet .observation-title > span:first-child {
  color: var(--muted);
}
main[data-page='journal'] .status-label {
  padding: var(--s4) var(--s8);
  border-radius: var(--radius-8);
  background: #e7effc;
  color: #7083ae;
  font-size: var(--text-12);
  line-height: var(--leading-16);
  white-space: nowrap;
}
main[data-page='journal'] .status-label.not_observed {
  padding: 0;
  background: none;
  color: #848ea4;
}
main[data-page='journal'] .status-label.practicing {
  background: #f7edce;
  color: #7d6a3e;
}
main[data-page='journal'] .status-label.observed {
  background: var(--sky-strong);
  color: var(--blue-dark);
}
main[data-page='journal'] .observation blockquote {
  margin: var(--s12) 0 var(--s8);
  padding: var(--s12) var(--s16);
  border-radius: var(--radius-12);
  background: #f4f2e7;
  color: #697797;
  font-size: var(--text-14);
  line-height: var(--leading-24);
}
main[data-page='journal'] .observation p {
  color: var(--subtle);
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
/* What Zeo was told: every note and guided reply in the chat, oldest first, each as a light
   blue box like other guidance for the assistant. */
main[data-page='journal'] .told-list {
  display: grid;
  gap: var(--s8);
  margin: 0;
  padding: 0;
  list-style: none;
}
main[data-page='journal'] .told-item {
  padding: var(--s12) var(--s16);
  border: 1px solid transparent;
  border-radius: var(--radius-12);
  background: #e2ecfe;
}
main[data-page='journal'] .told-head {
  color: #54668e;
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
main[data-page='journal'] .told-words {
  margin-top: var(--s4);
  color: #4f5e80;
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='journal'] .told-about {
  margin-top: var(--s4);
  color: #54668e;
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
/* A held note never reached Zeo, so it is drawn as an outline, like a held-back message. */
main[data-page='journal'] .told-item.held {
  border: 1px dashed #b9cbec;
  background: none;
}
/* What became of each item: Zeo's words in plain text, a note that was not sent in warning
   colour. */
main[data-page='journal'] .told-result {
  margin-top: var(--s8);
  padding-top: var(--s8);
  border-top: 1px solid #c9d8f6;
  color: var(--ink);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='journal'] .told-closing {
  margin-top: var(--s12);
  color: var(--muted);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='journal'] .told-held {
  margin-top: var(--s4);
  color: var(--warning-text);
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-weight: 600;
}
main[data-page='journal'] .earlier {
  margin-top: var(--s16);
}
/* The coach's notebook card: what Zeo was told at the start and what was written down after. */
main[data-page='journal'] .notebook-card .section-head a {
  color: var(--blue);
  font-size: var(--text-14);
  line-height: var(--leading-24);
}
main[data-page='journal'] .notebook-card .muted {
  margin-top: var(--s8);
}
/* The coach's write-up reads as a plain line, so the chat keeps one headline (Goal progress). */
main[data-page='journal'] .notebook-summary {
  margin-top: var(--s8);
  color: var(--subtle);
  font-size: var(--text-14);
  line-height: var(--leading-24);
}
main[data-page='journal'] .notebook-written {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s16);
  margin-top: var(--s12);
}
main[data-page='journal'] .notebook-written strong {
  color: var(--muted);
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
main[data-page='journal'] .notebook-written ul,
main[data-page='journal'] .briefing-list {
  margin: var(--s4) 0 0;
  padding-left: var(--s16);
  font-size: var(--text-14);
  line-height: var(--leading-24);
}
main[data-page='journal'] .earlier summary {
  display: list-item;
  width: fit-content;
  color: #657494;
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
main[data-page='journal'] .earlier-review {
  margin-top: var(--s16);
  padding: var(--s16) 0 0;
  border-top: 1px dashed #d0daec;
}
main[data-page='journal'] .review-time {
  color: var(--muted);
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
main[data-page='journal'] .earlier-review .review-summary {
  margin-top: var(--s4);
  font-size: var(--text-16);
  line-height: var(--leading-24);
  letter-spacing: var(--tracking-16);
}

/* ==== Transcript ==== */

main[data-page='journal'] .transcript .messages {
  margin-top: var(--s16);
}
/* Messages in a row from the same speaker sit closer together. */
main[data-page='journal'] .message.child + .message.child,
main[data-page='journal'] .message.assistant + .message.assistant {
  margin-top: calc(var(--s8) * -1);
}
main[data-page='journal'] .message-from {
  display: flex;
  align-items: center;
  gap: var(--s8);
  color: var(--speaker);
  font-size: var(--text-12);
  line-height: var(--leading-16);
  font-weight: 600;
}
main[data-page='journal'] .message.withheld {
  border: 1px dashed #d9c3ad;
  background: none;
}
main[data-page='journal'] .message.withheld p {
  color: var(--muted);
}
main[data-page='journal'] .held-tag {
  color: var(--warning-text);
  font-style: normal;
}
/* A voice chat message has a play button before its words. */
main[data-page='journal'] .message.has-audio {
  display: flex;
  align-items: center;
  gap: var(--s12);
}
main[data-page='journal'] .message-body {
  min-width: 0;
}
main[data-page='journal'] .message-play {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--s32);
  height: var(--s32);
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
}
main[data-page='journal'] .message-play:hover {
  background: var(--sky-strong);
}
main[data-page='journal'] .message-play[aria-pressed='true'] {
  background: var(--blue);
  color: var(--on-blue);
}
main[data-page='journal'] .message-play svg {
  width: var(--s16);
  height: var(--s16);
}
/* The triangle, nudged right so it looks centered; a square while the message plays. */
main[data-page='journal'] .message-play svg:first-child {
  margin-left: var(--s2);
}
main[data-page='journal'] .message-play svg + svg,
main[data-page='journal'] .message-play[aria-pressed='true'] svg:first-child {
  display: none;
}
main[data-page='journal'] .message-play[aria-pressed='true'] svg + svg {
  display: block;
}
main[data-page='journal'] .message-play[data-audio='loading'] {
  animation: recording-loading 0.9s ease-in-out infinite alternate;
}
@keyframes recording-loading {
  to {
    opacity: 0.55;
  }
}
@media (prefers-reduced-motion: reduce) {
  main[data-page='journal'] .message-play[data-audio='loading'] {
    animation: none;
  }
}

/* ==== Log: a timeline of everything in one chat ==== */

main[data-page='journal'] .log-card .section-head span {
  white-space: normal;
  text-align: right;
}
main[data-page='journal'] .log-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8);
  margin-top: var(--s12);
}
main[data-page='journal'] .log-filters button {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  padding: var(--s4) var(--s12);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--subtle);
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-weight: 600;
}
main[data-page='journal'] .log-filters button:hover {
  background: #f0ece2;
}
main[data-page='journal'] .log-filters button[aria-pressed='true'] {
  border-color: #b9cdf3;
  background: var(--sky);
  color: var(--blue-dark);
}
main[data-page='journal'] .log-filters button span {
  color: var(--muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
main[data-page='journal'] .log-empty {
  margin-top: var(--s16);
  font-size: var(--text-14);
}
main[data-page='journal'] .log-list {
  margin: var(--s16) 0 0;
  padding: 0;
  list-style: none;
}
/* Time on the left; a line with a dot per entry runs down beside the entries. */
main[data-page='journal'] .log-entry {
  --dot: #c4c9d6;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--s12);
}
main[data-page='journal'] .log-entry[data-tone='message'] {
  --dot: #dcdfe7;
}
main[data-page='journal'] .log-entry[data-tone='check'] {
  --dot: #9fb8e8;
}
main[data-page='journal']
  .log-entry:is([data-tone='guidance'], [data-tone='review'], [data-tone='delegation']) {
  --dot: var(--blue);
}
main[data-page='journal'] .log-entry[data-tone='home'] {
  --dot: var(--signal);
}
main[data-page='journal'] .log-entry[data-tone='warning'] {
  --dot: var(--red);
}
main[data-page='journal'] .log-entry time {
  padding-top: var(--s8);
  color: var(--muted);
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
main[data-page='journal'] .log-body {
  position: relative;
  min-width: 0;
  padding: var(--s8) 0 var(--s12) var(--s16);
  border-left: 2px solid var(--line);
}
main[data-page='journal'] .log-body::before {
  content: '';
  position: absolute;
  top: 14px;
  left: -6px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--dot);
}
main[data-page='journal'] .log-title {
  color: var(--ink);
  font-size: var(--text-14);
  line-height: var(--leading-24);
  font-weight: 600;
}
main[data-page='journal'] .log-entry[data-tone='message'] .log-title {
  color: var(--speaker);
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
main[data-page='journal'] .log-entry[data-tone='warning'] .log-title {
  color: var(--red);
}
main[data-page='journal'] .log-meta {
  color: var(--muted);
  font-size: var(--text-12);
  font-weight: 400;
}
main[data-page='journal'] .log-text {
  color: var(--subtle);
  font-size: var(--text-14);
  line-height: var(--leading-20);
  overflow-wrap: anywhere;
}
main[data-page='journal'] .log-entry[data-tone='message'] .log-text {
  color: var(--ink);
}
main[data-page='journal'] .log-status {
  margin-top: var(--s4);
  color: var(--muted);
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
main[data-page='journal'] .log-body blockquote {
  margin: var(--s4) 0 0;
  padding: var(--s8) var(--s12);
  border-radius: var(--radius-8);
  background: #f4f2e7;
  color: #5d6a88;
  font-size: var(--text-14);
  line-height: var(--leading-20);
  overflow-wrap: anywhere;
}
main[data-page='journal'] .log-matches {
  display: grid;
  gap: var(--s8);
  margin: var(--s8) 0 0;
  padding: var(--s8) var(--s12);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-8);
  background: var(--warning-surface);
  list-style: none;
}
main[data-page='journal'] .log-matches strong {
  display: block;
  color: var(--warning-ink);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='journal'] .log-matches span {
  color: var(--warning-text);
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
main[data-page='journal'] .log-more {
  margin-top: var(--s8);
}
main[data-page='journal'] .log-more summary {
  display: list-item;
  width: fit-content;
  color: #657494;
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
main[data-page='journal'] .log-rules,
main[data-page='journal'] .log-goals {
  margin: var(--s8) 0 0;
  padding: 0;
  list-style: none;
}
/* A name and its score; the score moves under the name where both do not fit on a line. */
main[data-page='journal'] .log-rules li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--s16);
  padding: var(--s4) 0;
  border-top: 1px dashed var(--line);
  color: var(--subtle);
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
main[data-page='journal'] .log-rules li > span:last-child {
  flex: none;
  font-variant-numeric: tabular-nums;
}
main[data-page='journal'] .log-rules small {
  display: inline;
  color: var(--muted);
}
main[data-page='journal'] .log-rules li.matched {
  color: var(--red);
  font-weight: 600;
}
main[data-page='journal'] .log-goals li {
  padding: var(--s8) 0;
  border-top: 1px dashed var(--line);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='journal'] .log-goals .status-label {
  margin-right: var(--s4);
}
/* The messages of a run of checks where nothing matched, inside its fold. */
main[data-page='journal'] .log-checks {
  display: grid;
  gap: var(--s8);
  margin: var(--s8) 0 0;
  padding: 0;
  list-style: none;
}
main[data-page='journal'] .log-checks li {
  padding-top: var(--s8);
  border-top: 1px dashed var(--line);
}
main[data-page='journal'] .log-checks li > .log-status {
  margin-top: 0;
}
main[data-page='journal'] .log-checks .log-more {
  margin-top: var(--s4);
}
main[data-page='journal'] .log-raw {
  margin: var(--s8) 0 0;
  padding: var(--s8) var(--s12);
  border-radius: var(--radius-8);
  background: #f4f2e7;
  color: var(--subtle);
  font: inherit;
  font-size: var(--text-12);
  line-height: var(--leading-20);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ==== Delete, at the end of a chat ==== */

main[data-page='journal'] .chat-delete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s12);
  min-height: var(--tap-target);
}
main[data-page='journal'] .chat-delete.asking {
  padding: var(--s12) var(--s12) var(--s12) var(--s24);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-16);
  background: var(--warning-surface);
}
main[data-page='journal'] .chat-delete p {
  margin-right: auto;
  color: var(--warning-ink);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='journal'] .chat-delete .text-button {
  color: var(--muted);
  font-size: var(--text-14);
}
main[data-page='journal'] .chat-delete .text-button:hover {
  color: var(--red);
}
main[data-page='journal'] .delete-confirm {
  background: var(--red);
  color: var(--on-blue);
}
main[data-page='journal'] .delete-confirm:hover:not(:disabled) {
  background: #843d2c;
}

/* ==== No conversations yet: sized to its content and centered in the page ==== */

main[data-page='journal'] .page-scroll {
  display: flex;
}
main[data-page='journal'] .page-scroll > .page-inner {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}
main[data-page='journal'] .big-empty {
  width: 100%;
  max-width: 520px;
  padding: var(--s48) var(--s32);
}
main[data-page='journal'] .big-empty h2 {
  font-size: var(--text-20);
  line-height: var(--leading-28);
}
main[data-page='journal'] .big-empty p {
  margin: var(--s8) auto var(--s24);
}

@media (max-width: 1150px) {
  main[data-page='journal'] .journal-layout {
    grid-template-columns: 224px minmax(0, 1fr);
  }
}

/* Phones: a full-width chat list, then one chat with a way back. */
@media (max-width: 850px) {
  main[data-page='journal'] .journal-layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }
  main[data-page='journal'] .journal-layout[data-view='list'] .journal-detail,
  main[data-page='journal'] .journal-layout[data-view='chat'] .session-list {
    display: none;
  }
  /* Until a chat is picked, the newest chat is not highlighted in the list. */
  main[data-page='journal'] .journal-layout:not([data-picked]) .session-item.selected {
    border-color: transparent;
    background: none;
  }
  /* Both scroll areas give back the pixels the logo row scrolled away (see style.css). */
  main[data-page='journal'] .session-list {
    padding: calc(var(--page-padding-top) + var(--scrolled-away, 0px)) var(--page-padding-x)
      var(--s32);
    overflow-x: hidden;
  }
  main[data-page='journal'] .session-item {
    min-width: 0;
  }
  main[data-page='journal'] .journal-detail {
    padding: var(--scrolled-away, 0px) var(--page-padding-x) var(--s32);
  }
  main[data-page='journal'] .back-row {
    position: sticky;
    top: 0;
    z-index: 2;
    display: block;
    margin: 0 calc(var(--page-padding-x) * -1);
    padding: var(--s8) var(--page-padding-x);
    background: var(--paper);
  }
  main[data-page='journal'] .back-button {
    gap: var(--s4);
    min-height: var(--s32);
    margin-left: -6px;
    font-size: var(--text-14);
    line-height: var(--leading-20);
  }
  main[data-page='journal'] .back-button svg {
    width: 20px;
    height: 20px;
  }
  main[data-page='journal'] .chat-head {
    padding-top: 0;
  }
  main[data-page='journal'] .observation-title {
    gap: var(--s12);
  }
}
@media (max-width: 620px) {
  main[data-page='journal'] .checks-card {
    padding: var(--s16);
  }
  main[data-page='journal'] .chat-title h2 {
    font-size: var(--text-20);
    line-height: var(--leading-28);
  }
  main[data-page='journal'] .observation-title {
    flex-wrap: wrap;
    gap: var(--s4) var(--s12);
  }
  main[data-page='journal'] .log-card .section-head {
    flex-direction: column;
    gap: 0;
  }
  main[data-page='journal'] .log-card .section-head span {
    text-align: left;
  }
  /* Wide enough for "12:57:14 PM" on one line. */
  main[data-page='journal'] .log-entry {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: var(--s8);
  }
}