/* Notes and suggestions: the part under the script, the badge on a line, a line's thread */
.cm { display: grid; gap: 14px; margin-top: 18px; padding-top: 26px; border-top: 1px solid var(--line); }
.cm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.cm-h2 { font: var(--display, 400) 28px/1.1 var(--serif); letter-spacing: var(--title-track, normal); }
.cm-sub { color: var(--soft); font-size: 15px; margin-top: -6px; max-width: 36em; }
.cm-empty { padding: 18px; border: 1px dashed var(--line); border-radius: calc(16px * var(--round, 1)); color: var(--muted); font-size: 14.5px; text-align: center; }

/* the craft check */
.cm-craft { display: grid; gap: 12px; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: calc(20px * var(--round, 1)); background: var(--sheet); }
.cm-craft-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.cm-craft-sub { font-size: 12.5px; color: var(--muted); }
.cm-craft-curve { position: relative; height: 70px; margin: 0 -4px; }
.cm-deep-mark { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--ai); box-shadow: 0 0 0 3px var(--sheet); }
.cm-metrics { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: calc(14px * var(--round, 1)); overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.cm-metrics > div { display: grid; gap: 1px; padding: 10px 12px 11px; background: var(--paper); min-width: 0; }
.cm-metrics dt { font: 400 10.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cm-metrics dd { margin: 0; font: var(--display, 400) 26px/1.1 var(--serif); letter-spacing: var(--title-track, normal); color: var(--deep); }
.cm-metrics dd small { font: 400 12px var(--mono); color: var(--muted); }
.cm-metrics span { font-size: 12.5px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-craft-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cm-craft-tags .label { margin-right: 4px; }
.cm-tag { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 9px; border-radius: var(--pill, 999px); background: var(--wash); font: 12.5px/1.4 var(--mono); color: var(--deep); }
.cm-tag b { font-weight: 400; color: var(--muted); }
.cm-tag-yours { background: var(--free-soft); color: var(--free-ink); font-style: italic; }
.cm-craft-none { font-size: 13px; color: var(--muted); }
.cm-tip { display: flex; gap: 8px; align-items: flex-start; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--soft); }
.cm-tip svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--go); }

/* Jev's mark */
.cm-jev { display: inline-flex; align-items: center; gap: 5px; font: 400 11.5px/1.2 var(--mono); color: var(--muted); }
.cm-jev svg { width: 15px; height: 15px; flex: none; color: var(--deep); }

/* the composer */
.cm-compose { display: grid; gap: 10px; padding: 14px; border-radius: calc(20px * var(--round, 1)); background: var(--free-soft); }
.cm-compose .field { background: var(--sheet); }
.cm-compose textarea.field { min-height: 92px; }
.cm-pick-wrap { display: grid; gap: 5px; }
.app .cm-pick { appearance: none; max-width: none; padding: 12px 40px 12px 14px; border: 1px solid var(--line); border-radius: calc(14px * var(--round, 1)); color: var(--ink); font: 15px/1.4 var(--sans); background-color: var(--sheet); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%236b6a63' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; text-overflow: ellipsis; }
.cm-compose-foot { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; }
.cm-compose-foot .btn { min-height: 44px; padding: 10px 20px; }
.cm-signin { display: grid; gap: 12px; padding: 16px; border-radius: calc(20px * var(--round, 1)); background: var(--free-soft); }
.cm-signin-lead { font: 400 22px/1.2 var(--serif); }
.cm-signin-sub { font-size: 14px; color: var(--soft); margin-top: 2px; }
.cm-signin .btn { justify-self: start; }

/* a note: people in sage, a warm face for each */
.cm-av .avatar { background: var(--free-soft); color: var(--free-ink); }
.cm-diff-act .free-badge { margin-left: -4px; }

/* a note */
.cm-list { display: grid; gap: 10px; }
.cm-note { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: calc(18px * var(--round, 1)); background: var(--sheet); }
.cm-note-head { display: flex; align-items: center; gap: 10px; }
.cm-who { display: grid; line-height: 1.25; min-width: 0; }
.cm-who b { font-weight: 500; font-size: 15px; }
.cm-who span { font-size: 12.5px; color: var(--muted); }
.cm-pill { margin-left: auto; padding: 3px 9px; border-radius: var(--pill, 999px); border: 1px solid var(--line); font: 400 11px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--soft); white-space: nowrap; }
.cm-pill-top { border-color: var(--free); background: var(--free-soft); color: var(--free-ink); }
.cm-pill-suggest { border-color: var(--go); background: var(--go-soft); color: var(--go-ink); }
.cm-quote { display: grid; gap: 2px; padding: 4px 0 4px 12px; border: 0; border-left: 2px solid var(--free); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.cm-quote-text { font: italic 400 17px/1.35 var(--serif); color: var(--soft); }
.cm-text { font-size: 15.5px; line-height: 1.55; }
.cm-note-foot { display: flex; align-items: center; gap: 8px; }
.cm-like { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 5px 12px 5px 9px; border-radius: var(--pill, 999px); border: 1px solid var(--line); background: var(--paper); color: var(--soft); font-size: 13px; cursor: pointer; }
.cm-like svg { width: 17px; height: 17px; color: var(--deep); }
.cm-like b { font: 500 12.5px var(--mono); color: var(--ink); }
.cm-like.is-on { border-color: var(--free); background: var(--free-soft); color: var(--free-ink); cursor: default; }
.cm-like.is-on svg { color: var(--free); }
.cm-like.is-on b { color: var(--free-ink); }

/* a suggestion, as a diff */
.cm-diff { display: grid; gap: 1px; border: 1px solid var(--line); border-radius: calc(14px * var(--round, 1)); overflow: hidden; background: var(--line); }
.cm-diff > * { background: var(--paper); }
.cm-diff-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; }
.cm-diff-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; padding: 8px 12px; font: 400 17px/1.35 var(--serif); }
.cm-diff-sign { font: 500 14px/1.6 var(--mono); }
.cm-del { background: #f6e7df; color: #7a4a38; }
.cm-del span:last-child { text-decoration: line-through; text-decoration-color: rgb(122 74 56 / 0.45); }
.cm-ins { background: #e3ede6; color: var(--deep); }
.cm-dir { background: #e3ede6; color: var(--deep); font: 14px/1.5 var(--sans); }
.cm-dir b { font: 500 13.5px var(--mono); }
.cm-dir em { color: var(--soft); font-style: normal; }
.cm-diff-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; }
.cm-diff-act .btn { min-height: 44px; padding: 9px 18px; font-size: 15px; }
.cm-diff-note { font-size: 12.5px; color: var(--muted); }
.cm-diff.is-done { border-color: var(--free); background: var(--free); }
.cm-diff.is-done .cm-diff-head { background: var(--free-soft); }
.cm-diff.is-done .cm-ins { background: var(--free-soft); color: var(--free-ink); }
.cm-taken { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--free-ink); }
.cm-taken svg { width: 15px; height: 15px; }

/* a note Jev kept back: only its writer sees it */
.cm-blocked { gap: 8px; background: var(--paper); border-style: dashed; }
.cm-blocked-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.cm-blocked-text { font-size: 14.5px; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.cm-blocked-why { font-size: 14px; color: var(--soft); }
.cm-blocked-why b { font-weight: 500; color: var(--ink); }

/* the badge on a line */
/* a small pill drawn inside a 44 px target, which reaches into the space above and below it */
.cm-badge { justify-self: start; display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; margin: -8px 0 -11px; padding: 0; border: 0; background: none; cursor: pointer; font: 400 11.5px/1.5 var(--mono); }
.cm-badge-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: var(--pill, 999px); border: 1px solid transparent; background: var(--free-soft); color: var(--free-ink); }
.cm-badge svg { width: 14px; height: 14px; }
.cm-badge b { font-weight: 500; }
.cm-badge-pill span { color: var(--go-ink); }
.cm-badge.has-suggest .cm-badge-pill { background: var(--go-soft); color: var(--go-ink); }

/* one line's thread */
.cm-thread { display: grid; gap: 16px; padding-top: 18px; max-width: 720px; }
.cm-thread-of { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cm-thread-title { font-size: 14px; color: var(--soft); }
.cm-thread-line { margin: 0; display: grid; gap: 10px; padding: 20px 18px; border-radius: calc(22px * var(--round, 1)); background: var(--sheet); border: 1px solid var(--line); }
.cm-ctx { font: 400 17px/1.35 var(--serif); color: var(--muted); opacity: 0.75; }
.cm-thread-text { font: 400 30px/1.15 var(--serif); color: var(--ink); text-wrap: balance; }
.cm-thread-text.is-yours { color: var(--deep); font-style: italic; }
.cm-thread-dir { font: 12px/1.3 var(--mono); color: var(--muted); margin-top: -4px; }
.cm-thread .cm-head { margin-top: 6px; }
.cm-thread-end { height: 40px; }

@container app (min-width: 700px) {
  .cm { gap: 16px; }
  .cm-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cm-signin { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .sp-line .cm-badge { grid-column: 1; margin-top: -24px; }
  .cm-thread { padding-top: 40px; }
  .cm-thread-text { font-size: 40px; }
  .cm-thread-line { padding: 28px 30px; }
}