/* Guidance page (#guide): the box where the parent says what they want, what a request came back
   with, one card per entry, and where alerts reach the parent. */

/* ==== The box at the top ==== */

main[data-page='guide'] .compose {
  position: relative;
  padding: var(--s24);
  border-radius: var(--radius-24);
  background: var(--sky);
}
main[data-page='guide'] .compose-head {
  display: flex;
  align-items: center;
  gap: var(--s16);
}
/* Zeo stands beside the question; its drawing leaves room around the figure, which is cropped. */
main[data-page='guide'] .compose-zeo {
  flex: none;
  width: var(--s64);
  height: var(--s64);
  margin: calc(-1 * var(--s8)) 0;
}
main[data-page='guide'] .compose-head h2 {
  font-size: var(--text-24);
  line-height: var(--leading-32);
}
main[data-page='guide'] .compose-head p {
  color: #4a5878;
  line-height: var(--leading-20);
}
/* The words and the button share one field; the button sits in its lower corner. */
main[data-page='guide'] .compose-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s8);
  margin-top: var(--s16);
  padding: var(--s8);
  border: 2px solid transparent;
  border-radius: var(--radius-16);
  background: var(--white);
  box-shadow: 0 2px 0 #c5d6f6;
  transition: border-color var(--speed) var(--curve);
}
main[data-page='guide'] .compose-box:focus-within {
  border-color: var(--focus);
}
main[data-page='guide'] .compose-box textarea {
  min-height: var(--s48);
  margin: 0;
  padding: var(--s8) var(--s12);
  border: 0;
  background: none;
  font-size: var(--text-16);
  line-height: var(--leading-24);
  resize: none;
  outline: none;
}
main[data-page='guide'] .compose-box textarea::placeholder {
  color: #8d98b3;
}
main[data-page='guide'] .compose-box .button {
  padding: var(--s8) var(--s16);
}
main[data-page='guide'] .compose-status {
  display: flex;
  align-items: center;
  gap: var(--s12);
  margin-top: var(--s12);
  color: #4a5878;
  font-weight: 600;
}
/* Three dots that rise in turn while a request is worked out. */
main[data-page='guide'] .thinking-dots {
  display: inline-flex;
  gap: var(--s4);
}
main[data-page='guide'] .thinking-dots i {
  width: var(--s8);
  height: var(--s8);
  border-radius: 50%;
  background: var(--blue);
  animation: guide-thinking 1.2s var(--curve) infinite;
}
main[data-page='guide'] .thinking-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
main[data-page='guide'] .thinking-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes guide-thinking {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* Ideas to start with, as chips under the box. */
main[data-page='guide'] .ideas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s8);
  margin-top: var(--s16);
}
main[data-page='guide'] .ideas > span {
  color: #4a5878;
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-weight: 600;
}
main[data-page='guide'] .idea {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--s32);
  padding: var(--s4) var(--s12) var(--s4) var(--s8);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--idea-text);
  font-weight: 600;
}
main[data-page='guide'] .idea:hover {
  background: var(--hover);
}
main[data-page='guide'] .idea svg {
  width: var(--s16);
  height: var(--s16);
}

/* ==== What a request came back with ==== */

main[data-page='guide'] .guide-reply {
  display: grid;
  gap: var(--s12);
  margin-top: var(--s16);
}
/* The parent's own words, above what came back for them. */
main[data-page='guide'] .reply-asked {
  color: var(--hint);
  line-height: var(--leading-20);
  overflow-wrap: anywhere;
}
main[data-page='guide'] .reply-message {
  display: flex;
  align-items: flex-start;
  gap: var(--s8);
  font-size: var(--text-16);
  line-height: var(--leading-24);
  font-weight: 600;
}
main[data-page='guide'] .reply-message:focus {
  outline: none;
}
main[data-page='guide'] .reply-message svg {
  width: var(--icon-size-small);
  height: var(--leading-24);
  color: var(--signal);
}
main[data-page='guide'] .proposals {
  display: grid;
  gap: var(--s12);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* A proposal is not set up yet, so its edge is dashed where a card's is solid. */
main[data-page='guide'] .proposal {
  padding: var(--s16) var(--s24);
  border: 2px dashed #a9c0ee;
  border-radius: var(--radius-16);
  background: var(--white);
  container: entry / inline-size;
}
main[data-page='guide'] .proposal-kind {
  display: flex;
  align-items: center;
  gap: var(--s4);
  color: var(--blue);
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
main[data-page='guide'] .proposal-kind svg {
  width: var(--s16);
  height: var(--s16);
}
main[data-page='guide'] .proposal-title {
  font-size: var(--text-18);
  line-height: var(--leading-28);
}
main[data-page='guide'] .proposal-title:focus {
  outline: none;
}
main[data-page='guide'] .proposal-renamed {
  color: var(--hint);
  line-height: var(--leading-20);
}
main[data-page='guide'] .proposal .entry-lines {
  margin-top: var(--s12);
}
main[data-page='guide'] .proposal-note {
  max-width: 680px;
  margin-top: var(--s12);
  padding-left: var(--s12);
  border-left: 3px solid var(--signal);
  color: #4a5878;
  line-height: var(--leading-20);
}
/* What a change does to a check that its sentence does not show. */
main[data-page='guide'] .proposal-unseen {
  max-width: 760px;
  margin-top: var(--s12);
  padding: var(--s12) var(--s16);
  border-radius: var(--radius-12);
  background: #fff6dc;
  line-height: var(--leading-20);
}
main[data-page='guide'] .proposal-unseen p {
  font-weight: 600;
  line-height: var(--leading-20);
}
main[data-page='guide'] .proposal-unseen ul {
  display: grid;
  gap: var(--s4);
  margin: var(--s4) 0 0;
  padding-left: var(--s16);
}
main[data-page='guide'] .proposal-adjust {
  gap: var(--s4);
  min-height: var(--s32);
  margin-top: var(--s8);
  color: var(--blue-dark);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='guide'] .proposal-adjust svg {
  width: var(--s16);
  height: var(--s16);
  color: var(--signal);
}
main[data-page='guide'] .proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8);
  margin-top: var(--s16);
}
main[data-page='guide'] .proposal-actions .button {
  padding: var(--s8) var(--s16);
}
/* While a change to a card is on show, its lines are not cut short, so old and new compare. */
main[data-page='guide'] .entry-card:has(.guide-reply) > .entry-lines .line-how {
  display: block;
}
/* Shown inside the card it changes, a reply needs no edge of its own. */
main[data-page='guide'] .entry-card .guide-reply {
  margin-top: var(--s16);
  padding-top: var(--s16);
  border-top: var(--border);
}
main[data-page='guide'] .entry-card .proposal {
  padding: 0;
  border: 0;
}
main[data-page='guide'] .entry-card .proposal-title {
  display: none;
}

/* A question, with answers to tap. */
main[data-page='guide'] .answers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8);
  margin-top: var(--s12);
}
main[data-page='guide'] .answer {
  min-height: var(--tap-target);
  padding: var(--s8) var(--s16);
  border: 1px solid #c2d1eb;
  border-radius: var(--radius-12);
  font-weight: 600;
  text-align: left;
}
main[data-page='guide'] .answer:hover {
  background: var(--hover);
}
main[data-page='guide'] .own-answer {
  display: flex;
  gap: var(--s8);
  max-width: 560px;
  margin-top: var(--s12);
}
main[data-page='guide'] .own-answer input {
  margin: 0;
  padding: var(--s8) var(--s12);
}
main[data-page='guide'] .own-answer .button {
  padding: var(--s8) var(--s16);
}

/* ==== Sections ==== */

main[data-page='guide'] .guide-section {
  margin-top: var(--s32);
}
main[data-page='guide'] .guide-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4) var(--s16);
  margin-bottom: var(--s12);
}
main[data-page='guide'] .guide-section-head h2 {
  font-size: var(--text-18);
  line-height: var(--leading-28);
  letter-spacing: var(--tracking-18);
}
main[data-page='guide'] .section-count {
  color: var(--muted);
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-weight: 600;
}
main[data-page='guide'] .section-intro {
  max-width: 680px;
  margin: calc(-1 * var(--s8)) 0 var(--s12);
  color: var(--hint);
  line-height: var(--leading-20);
}
main[data-page='guide'] .guide-section-head .text-button,
main[data-page='guide'] .section-foot .text-button {
  gap: var(--s4);
  color: var(--blue-dark);
  font-size: var(--text-14);
  line-height: var(--leading-24);
}
main[data-page='guide'] .section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s8) var(--s24);
  margin-top: var(--s12);
}
main[data-page='guide'] .section-foot svg {
  width: var(--s16);
  height: var(--s16);
}
main[data-page='guide'] .entry-empty {
  padding: var(--s24);
  border: 1px dashed #c6d3e9;
  border-radius: var(--radius-16);
  color: var(--muted);
}
main[data-page='guide'] .chat-ideas-block {
  display: grid;
  flex-basis: 100%;
  gap: var(--s8);
}
main[data-page='guide'] .chat-ideas-title {
  color: var(--hint);
  font-weight: 600;
  line-height: var(--leading-20);
}
main[data-page='guide'] .ideas-status {
  color: var(--hint);
  line-height: var(--leading-24);
}
/* Ideas from recent chats, each with what in the chats prompted it. */
main[data-page='guide'] .chat-ideas {
  display: grid;
  flex-basis: 100%;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s8);
  margin: 0;
  padding: 0;
  list-style: none;
}
main[data-page='guide'] .chat-idea {
  display: grid;
  gap: var(--s4);
  width: 100%;
  height: 100%;
  padding: var(--s12) var(--s16);
  border-radius: var(--radius-12);
  background: var(--idea);
  text-align: left;
}
main[data-page='guide'] .chat-idea:hover {
  background: var(--hover);
}
main[data-page='guide'] .chat-idea strong {
  color: var(--idea-text);
}
main[data-page='guide'] .chat-idea span {
  color: #4a5878;
  font-size: var(--text-12);
  line-height: var(--leading-20);
}

/* ==== One card per entry ==== */

/* A fixed column keeps long one-line text (the removed row) from widening the list. */
main[data-page='guide'] .entry-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s12);
}
/* position: relative keeps the card's screen-reader-only text inside the scroll area. */
main[data-page='guide'] .entry-card {
  position: relative;
  padding: var(--s16) var(--s24);
  border: var(--border);
  border-radius: var(--radius-16);
  background: var(--white);
  container: entry / inline-size;
}
main[data-page='guide'] .entry-card:focus {
  outline: none;
}
main[data-page='guide'] .entry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s12);
}
main[data-page='guide'] .entry-title {
  min-width: 0;
  padding: var(--s4) 0;
  font-size: var(--text-16);
  line-height: var(--leading-24);
  letter-spacing: var(--tracking-16);
  overflow-wrap: anywhere;
}
/* One of Zeo's protections that no longer reads as it shipped, with the way back. */
main[data-page='guide'] .entry-changed {
  color: var(--warning-text);
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-weight: 600;
}
main[data-page='guide'] .entry-changed .text-button {
  display: inline;
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: var(--s2);
}
/* A paused entry dims what it would do and says what paused means. */
main[data-page='guide'] .entry-paused {
  display: none;
  color: var(--muted);
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-weight: 600;
}
main[data-page='guide'] .entry-card:has([data-entry-switch]:not(:checked)) .entry-paused {
  display: block;
}
main[data-page='guide'] .entry-card:has([data-entry-switch]:not(:checked)) .entry-title,
main[data-page='guide'] .entry-card:has([data-entry-switch]:not(:checked)) > .entry-lines {
  opacity: 0.5;
}

/* What the entry does: when it acts, then what happens. */
main[data-page='guide'] .entry-lines {
  display: grid;
  gap: var(--s12);
  margin: var(--s8) 0 0;
  padding: 0;
  list-style: none;
}
main[data-page='guide'] .entry-line {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
  gap: var(--s16);
}
/* The label's weight follows how firmly the part acts: always, every chat, when it fits,
   watching. A check is Zeo's yellow light. */
main[data-page='guide'] .line-timing {
  justify-self: start;
  margin-top: var(--s2);
  padding: 1px var(--s8);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--removed);
  color: var(--subtle);
  font-size: var(--text-12);
  line-height: var(--leading-16);
  font-weight: 600;
  white-space: nowrap;
}
main[data-page='guide'] .line-timing[data-kind='habit'] {
  background: var(--ink);
  color: var(--on-dark);
}
main[data-page='guide'] .line-timing[data-kind='lead'] {
  background: var(--blue);
  color: var(--on-blue);
}
main[data-page='guide'] .line-timing[data-kind='nudge'] {
  background: var(--sky-strong);
  color: var(--blue-dark);
}
main[data-page='guide'] .line-timing[data-kind='notice'] {
  border-color: #c2d1eb;
  background: none;
  color: var(--tab-text);
}
main[data-page='guide'] .line-timing[data-kind='check'] {
  background: #ffe7a6;
  color: #5c4100;
}
main[data-page='guide'] .line-body {
  display: grid;
  gap: var(--s2);
  min-width: 0;
}
main[data-page='guide'] .line-body p {
  overflow-wrap: anywhere;
}
main[data-page='guide'] .line-how {
  color: var(--hint);
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
/* On a card, the words a check gives the assistant are cut to two lines; Details has them whole. */
main[data-page='guide'] .entry-card > .entry-lines [data-part='check'] .line-how {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
main[data-page='guide'] .line-how a,
main[data-page='guide'] .guide-more a {
  color: var(--blue);
  font-weight: 600;
}
main[data-page='guide'] .line-how a:hover,
main[data-page='guide'] .guide-more a:hover,
main[data-page='guide'] .line-progress:hover {
  text-decoration: underline;
  text-underline-offset: var(--s4);
}
/* A goal's latest chats as dots, oldest first, as in the coach's notebook. */
main[data-page='guide'] .line-progress {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  width: fit-content;
  margin-top: var(--s2);
  color: var(--blue);
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-weight: 600;
}
main[data-page='guide'] .dots {
  display: inline-flex;
  gap: var(--s4);
}
main[data-page='guide'] .dot {
  width: var(--s8);
  height: var(--s8);
  border-radius: 50%;
}
main[data-page='guide'] .dot.observed {
  background: var(--blue);
}
main[data-page='guide'] .dot.practicing {
  background: #f2c14e;
}
main[data-page='guide'] .dot.not_observed {
  border: 2px solid #c0cce2;
}
/* "New", "Changed", or "Removed" beside a line of a proposal that changes an entry. */
main[data-page='guide'] .line-mark {
  display: inline-block;
  margin-left: var(--s8);
  padding: 0 var(--s8);
  border-radius: var(--radius-pill);
  background: #ffe7a6;
  color: #5c4100;
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-weight: 600;
  vertical-align: 1px;
}
main[data-page='guide'] .entry-line.dropped p {
  color: var(--muted);
}

/* "Change…" and "Details" under the lines. */
main[data-page='guide'] .entry-foot {
  display: flex;
  gap: var(--s4);
  margin: var(--s8) 0 0 calc(-1 * var(--s12));
}
main[data-page='guide'] .entry-foot .text-button {
  gap: var(--s4);
  min-height: var(--s32);
  padding: var(--s4) var(--s12);
  border-radius: var(--radius-8);
  color: var(--blue-dark);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='guide'] .entry-foot .text-button:hover {
  background: var(--tint);
  text-decoration: none;
}
main[data-page='guide'] .entry-foot svg {
  width: var(--s16);
  height: var(--s16);
  color: var(--signal);
}
/* "Remove" sits apart, at the far end of the row, in a quieter colour. */
main[data-page='guide'] .entry-foot .entry-remove {
  margin-left: auto;
  color: var(--muted);
}
main[data-page='guide'] .entry-foot .entry-remove:hover {
  background: var(--warning-surface);
  color: var(--red);
}
main[data-page='guide'] .entry-foot .entry-remove svg {
  color: inherit;
}
/* The question asked before one of Zeo's protections is paused or removed. */
main[data-page='guide'] .entry-confirm {
  display: grid;
  gap: var(--s12);
  margin-top: var(--s16);
  padding: var(--s16);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-12);
  background: var(--warning-surface);
  color: var(--warning-ink);
}
main[data-page='guide'] .entry-confirm p {
  font-weight: 600;
}
main[data-page='guide'] .entry-confirm p:focus {
  outline: none;
}
main[data-page='guide'] .entry-more::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: var(--s4);
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--speed) var(--curve);
}
main[data-page='guide'] .entry-more[aria-expanded='true']::after {
  transform: translateY(2px) rotate(-135deg);
}

/* The box that opens under a card for saying what should be different. */
main[data-page='guide'] .change-box {
  display: grid;
  gap: var(--s8);
  margin-top: var(--s16);
  padding: var(--s16);
  border-radius: var(--radius-12);
  background: var(--sky);
}
main[data-page='guide'] .change-box textarea {
  min-height: var(--tap-target);
  margin: 0;
  padding: var(--s8) var(--s12);
  border-color: transparent;
}
main[data-page='guide'] .change-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s8);
}
main[data-page='guide'] .change-actions .button {
  padding: var(--s8) var(--s16);
}
main[data-page='guide'] .change-actions .secondary {
  background: var(--white);
}

/* A removed entry, shown in place with Undo. */
main[data-page='guide'] .entry-removed {
  display: flex;
  align-items: center;
  gap: var(--s16);
  min-height: var(--s48);
  padding: var(--s8) var(--s16) var(--s8) var(--s24);
  border-radius: var(--radius-16);
  background: var(--removed);
  color: var(--muted);
}
main[data-page='guide'] .entry-removed span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
main[data-page='guide'] .entry-removed .text-button {
  margin-right: calc(var(--s8) * -1);
  padding: var(--s4) var(--s8);
  border-radius: var(--radius-8);
  font-size: var(--text-14);
  line-height: var(--leading-24);
}

/* ==== Details: every exact field ==== */

main[data-page='guide'] .detail-fields {
  display: grid;
  gap: var(--s16);
  margin-top: var(--s12);
  padding: var(--s16) 0 var(--s8);
  border-top: var(--border);
}
main[data-page='guide'] .detail-ask {
  display: grid;
  gap: var(--s4);
}
main[data-page='guide'] .detail-ask span {
  color: var(--hint);
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-weight: 600;
}
main[data-page='guide'] .detail-ask blockquote {
  margin: 0;
  padding-left: var(--s12);
  border-left: 3px solid var(--sky-strong);
  line-height: var(--leading-24);
}
main[data-page='guide'] .detail-field {
  min-width: 0;
  margin: 0;
}
main[data-page='guide'] .detail-field legend {
  margin-bottom: var(--s8);
}
main[data-page='guide'] .detail-field .field-help {
  margin: var(--s2) 0 0;
}
main[data-page='guide'] .detail-field textarea {
  min-height: 0;
}
/* Each part has its own block, headed by when it acts. */
main[data-page='guide'] .detail-part {
  display: grid;
  gap: var(--s16);
  padding: var(--s16);
  border-radius: var(--radius-12);
  background: var(--paper);
  container: part / inline-size;
}
main[data-page='guide'] .detail-part-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s16);
}
main[data-page='guide'] .detail-part-head h4 {
  margin: 0;
  font-size: var(--text-14);
  line-height: var(--leading-20);
  font-weight: 700;
}
main[data-page='guide'] .detail-part-head .text-button:hover {
  color: var(--red);
}
main[data-page='guide'] .detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s16) var(--s32);
}
main[data-page='guide'] .detail-tick {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  min-height: var(--s32);
  margin: var(--s8) 0 0;
  font-weight: 400;
  cursor: pointer;
}
/* One-of-several choice, as a small segmented control. */
main[data-page='guide'] .choice {
  display: inline-flex;
  gap: var(--s4);
  max-width: 100%;
  padding: var(--s4);
  border-radius: var(--radius-12);
  background: var(--tint);
}
main[data-page='guide'] .choice label {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 6px var(--s16);
  border-radius: var(--radius-8);
  color: var(--tab-text);
  font-size: var(--text-14);
  line-height: var(--leading-24);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--speed) var(--curve),
    color var(--speed) var(--curve);
}
main[data-page='guide'] .choice span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The radio button covers its label, so the whole segment is clickable. */
main[data-page='guide'] .choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
main[data-page='guide'] .choice label:hover {
  color: var(--ink);
}
main[data-page='guide'] .choice label:has(:checked) {
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 1px 4px #18234a1f;
}
main[data-page='guide'] .choice label:has(:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--s2);
}
/* Parts the entry does not have yet, to add by hand. */
main[data-page='guide'] .add-parts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s8);
}
main[data-page='guide'] .add-parts > span {
  color: var(--hint);
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-weight: 600;
}
main[data-page='guide'] .add-part {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--s32);
  padding: var(--s4) var(--s12) var(--s4) var(--s8);
  border-radius: var(--radius-pill);
  background: var(--idea);
  color: var(--idea-text);
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-weight: 600;
}
main[data-page='guide'] .add-part:hover {
  background: var(--hover);
}
main[data-page='guide'] .add-part svg {
  width: 14px;
  height: 14px;
}
/* ==== Notifications: where a check that notifies reaches the parent ==== */

main[data-page='guide'] .notify-section {
  margin-top: var(--s48);
}
main[data-page='guide'] .notify-section > h2 {
  font-size: var(--text-18);
  line-height: var(--leading-28);
  letter-spacing: var(--tracking-18);
}
main[data-page='guide'] .notify-section > p {
  margin-bottom: var(--s16);
  color: var(--hint);
}
main[data-page='guide'] .notify-card {
  padding-top: 0;
  padding-bottom: 0;
}
main[data-page='guide'] .notify-channel {
  padding: var(--s16) 0;
}
main[data-page='guide'] .notify-channel + .notify-channel {
  border-top: var(--border);
}
main[data-page='guide'] .notify-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s16);
  min-height: var(--tap-target);
}
main[data-page='guide'] .notify-row h3 {
  font-size: var(--text-16);
  line-height: var(--leading-24);
  letter-spacing: var(--tracking-16);
}
main[data-page='guide'] .notify-row p {
  color: var(--hint);
  line-height: var(--leading-20);
}
main[data-page='guide'] .notify-soon {
  display: inline-block;
  margin-left: var(--s8);
  padding: 0 var(--s8);
  border-radius: var(--radius-pill);
  background: var(--idea);
  color: var(--idea-text);
  font-size: var(--text-12);
  line-height: var(--leading-20);
  letter-spacing: 0;
  vertical-align: 1px;
}
main[data-page='guide'] .notify-on {
  flex: none;
  color: var(--blue);
  font-weight: 600;
}
main[data-page='guide'] .notify-row .switch-toggle {
  flex: none;
}
main[data-page='guide'] .notify-field {
  max-width: 420px;
  margin-top: var(--s12);
}
main[data-page='guide'] .guide-more {
  margin-top: var(--s32);
  color: var(--hint);
}
main[data-page='guide'] .guide-more .text-button {
  display: inline;
  color: var(--blue);
  font-size: inherit;
  line-height: inherit;
}

/* ==== Narrow cards and phones ==== */

/* A narrow card puts each label above its text. */
@container entry (width < 520px) {
  main[data-page='guide'] .entry-line {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }
}
/* A narrow check puts the slider's end labels under it, so the slider keeps a usable length. */
@container part (width < 520px) {
  main[data-page='guide'] .sensitivity-range {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'slider slider' 'low high';
    gap: var(--s4) var(--s16);
    min-height: 0;
    margin-top: var(--s12);
  }
  main[data-page='guide'] .sensitivity-scale span:last-child {
    text-align: right;
  }
  main[data-page='guide'] .choice {
    display: flex;
    width: 100%;
  }
  main[data-page='guide'] .choice label {
    flex: 1 1 auto;
    padding: 6px var(--s8);
  }
}
/* Narrower still, choices stack, so three long ones never push past the card's edge. */
@container part (width < 400px) {
  main[data-page='guide'] .choice {
    display: grid;
  }
  main[data-page='guide'] .choice label {
    text-align: left;
  }
  main[data-page='guide'] .detail-row {
    display: grid;
  }
}
@media (max-width: 620px) {
  main[data-page='guide'] .compose {
    padding: var(--s16);
    border-radius: var(--radius-16);
  }
  main[data-page='guide'] .compose-zeo {
    width: var(--s48);
    height: var(--s48);
  }
  main[data-page='guide'] .compose-head h2 {
    font-size: var(--text-20);
    line-height: var(--leading-28);
  }
  /* The button moves under the words, across the field. */
  main[data-page='guide'] .compose-box {
    grid-template-columns: minmax(0, 1fr);
  }
  main[data-page='guide'] .proposal,
  main[data-page='guide'] .entry-card {
    padding: var(--s12) var(--s16);
  }
  main[data-page='guide'] .entry-card .proposal {
    padding: 0;
  }
  main[data-page='guide'] .detail-part {
    padding: var(--s12);
  }
  /* Three long choices stack, so each keeps its words on one line. */
  main[data-page='guide'] [data-part-fields='goal'] .choice {
    display: grid;
  }
  main[data-page='guide'] [data-part-fields='goal'] .choice label {
    text-align: left;
  }
  main[data-page='guide'] .entry-removed {
    padding-left: var(--s16);
  }
  /* Things to tap are at least a finger tall. */
  main[data-page='guide'] .entry-foot .text-button,
  main[data-page='guide'] .section-foot .text-button,
  main[data-page='guide'] .guide-section-head .text-button,
  main[data-page='guide'] .proposal-adjust,
  main[data-page='guide'] .line-progress,
  main[data-page='guide'] .idea {
    min-height: var(--tap-target);
  }
  main[data-page='guide'] .entry-head .switch-label {
    min-height: var(--tap-target);
  }
  main[data-page='guide'] .notify-card {
    padding: 0 var(--s16);
  }
}