/* Accounts and comments (community_web.py). Kept in its own file and
   prefixed cm- so it sits beside styles.css; it uses only the tokens
   styles.css defines on :root. The controls here (buttons, fields, the
   comment icon, Reply and Report) are drawn by the shared components in
   styles.css (docs/design/ui-system.md); this file only lays them out. */

/* The header's account control: a quiet compact button, the reader's
   name cut short when it is long. */
.cm-account-link {
  display: inline-block;
  max-width: 12rem;
  line-height: calc(var(--control-h-sm) - 2px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cm-form { display: grid; gap: var(--space-2); max-width: 28rem; margin-block: var(--space-5); }
.cm-form label { font-weight: 600; }
.cm-form input[type="email"],
.cm-form input[type="text"],
.cm-form textarea,
.cm-form select { width: 100%; }
.cm-form textarea { min-height: 6rem; resize: vertical; }
.cm-hint, .cm-note { color: var(--muted); font-size: .9rem; }
.cm-form p { margin: 0; }
.cm-form .cm-hint { font-size: var(--text-min); }
.cm-error { color: var(--danger); font-weight: 600; }
.cm-dev {
  border: 1px dashed var(--control-line);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  word-break: break-all;
}
.cm-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* "Continue with Google": Google's neutral style, a white button with the
   coloured mark, in both themes; otherwise the shared button's size. */
.button.button-google {
  gap: var(--space-2);
  color: #1f1f1f;
  background: #fff;
  border-color: #747775;
}
.button.button-google:hover { color: #1f1f1f; background: #f1f3f4; border-color: #1f1f1f; }
.cm-google-mark { flex: none; }
.cm-or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 28rem;
  color: var(--muted);
  font-size: .9rem;
}
.cm-or::before, .cm-or::after { content: ""; flex: 1; border-top: 1px solid var(--control-line); }

/* A discussion (community/_thread.html). */
.cm-thread { margin-block: var(--space-5); }
.cm-count { font-size: 1.05rem; margin: 0 0 var(--space-3); }
.cm-empty { color: var(--muted); }
.cm-list { display: grid; gap: var(--space-4); }
.cm-group { display: grid; gap: var(--space-2); }
.cm-comment {
  border-left: 3px solid var(--line);
  padding: .1rem 0 .1rem var(--space-3);
}
.cm-reply { margin-left: var(--space-5); border-left-color: var(--subtle-line); }
.cm-meta { font-size: .9rem; color: var(--muted); }
.cm-name { color: var(--ink); }
.cm-body { white-space: pre-line; overflow-wrap: anywhere; margin-block: var(--space-1); color: var(--body-copy); line-height: 1.5; }
.cm-placeholder { color: var(--muted); font-style: italic; margin: 0; }
.cm-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4); font-size: .85rem; }
.cm-actions form { margin: 0; }
.cm-report summary { list-style: none; }
.cm-report summary::-webkit-details-marker { display: none; }
.cm-report[open] { flex-basis: 100%; }
.cm-report-form { display: grid; gap: var(--space-2); margin-top: var(--space-2); max-width: 26rem; }
.cm-report-form fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: var(--space-4); flex-wrap: wrap; }
.cm-report-form legend { font-weight: 600; margin-bottom: var(--space-1); }
.cm-report-note { display: grid; gap: var(--space-1); }
.cm-more { font-size: .85rem; margin: 0; }
/* The box to add a comment (community/_thread.html) and to edit one in
   place (community.js): no heading (the placeholder says what it is),
   two lines that grow as you write, and one foot row. Left, small and
   muted: "Posting as <name>" (from /api/me) and the rules. Right: the
   count of characters (only near the limit), Cancel, and the primary
   button last. Signed out, held back or paused, the same foot stands in
   for the box, so every state lines up the same way. */
.cm-compose { max-width: none; gap: var(--space-2); margin: var(--space-4) 0 0; }
.cm-thread .cm-compose textarea {
  min-height: calc(3em + .9rem + 2px);
  line-height: 1.5;
}
.cm-compose-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}
.cm-compose-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  margin: 0;
  color: var(--muted);
  font: var(--text-min)/1.4 var(--ui-font);
}
.cm-compose-meta:empty { display: none; }
.cm-posting-as strong { color: var(--body-copy); }
.cm-compose-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.cm-compose-actions [hidden] { display: none; }
.cm-chars { color: var(--muted); font: var(--text-min)/1 var(--ui-font); font-variant-numeric: tabular-nums; }
.cm-chars.is-full { color: var(--danger); font-weight: bold; }
/* "Replying to <name>" over the box (community.js), or the no-script
   note when the page was opened with ?reply=. */
.cm-replying { margin: 0; color: var(--muted); font: var(--text-min)/1.4 var(--ui-font); }
.cm-replying strong { color: var(--body-copy); }
.cm-replying a { color: var(--link); }
.cm-signin-prompt { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; }
.cm-posting-notice { margin: 0; color: var(--ink); line-height: 1.5; }
/* The head of a panel or an embed: the count on the left, the way to the
   whole discussion on the right. */
.cm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-2);
}
.cm-head .cm-count { margin: 0; }
.cm-subject { margin-bottom: var(--space-5); }
.article-page .cm-subject-title { font-size: 1.7rem; margin: .1rem 0 .15rem; }
/* The reader's own held comments (community.js showHeld): only they see
   them, so they are marked as plainly as possible as not public. */
.cm-thread .cm-held {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--control-line);
  border-radius: var(--radius-panel);
}
.cm-held-heading { margin: 0; font: bold .8rem/1.3 var(--ui-font); text-transform: uppercase; color: var(--muted); }
.cm-held-comment { border-left-color: var(--danger-fill); }
.cm-held-comment .cm-body { color: var(--muted); }
.cm-held-badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border: 1px solid var(--danger);
  border-radius: var(--radius-control);
  color: var(--danger);
  font: bold .75rem/1.5 var(--ui-font);
}
.cm-held-note { margin: var(--space-1) 0 0; font-size: .9rem; color: var(--ink); }
.cm-comment.is-new { animation: cm-flash 2s ease-out; }
@keyframes cm-flash { from { background: var(--mark-bg); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .cm-comment.is-new { animation: none; } }

/* The comment control on a statement card (community/_trigger.html) and
   the panel it opens (community.js): an icon button like the others in
   the footer (styles.css), at full strength whether or not there are
   comments; with some, their count sits beside the icon. */

.cm-panel {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}
.cm-panel .cm-thread { margin: 0; }
/* A peek (hover) floats over what follows instead of pushing it down,
   so the page does not move under the pointer. */
.cm-panel.is-peek {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: var(--space-1);
  box-shadow: var(--menu-shadow);
  max-height: 22rem;
  overflow: auto;
}
.cm-panel.is-peek .cm-compose, .cm-panel.is-peek .cm-signin-prompt { display: none; }
.cm-panel-loading { color: var(--muted); font-size: .9rem; margin: 0; }
@media (max-width: 600px) { .cm-account-link { max-width: 5.5rem; font-size: var(--text-min); } }

/* The moderation page (community/admin.html). */
.cm-admin-row { border-top: 1px solid var(--line); padding-block: var(--space-3); }
.cm-admin-removed .cm-body, .cm-admin-deleted .cm-body { opacity: .6; text-decoration: line-through; }
.cm-admin-reports { color: var(--danger); font-weight: 600; margin: var(--space-1) 0; }
.cm-admin-flag { font-weight: 600; margin: var(--space-1) 0; }
.cm-admin-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.cm-admin-actions form { margin: 0; }

/* A discussion embedded in the page of what it is about (community/_discussion.html). */
/* Its heading is the page's own section heading (section_heading), so
   it carries no rule of its own. */
.cm-embed { margin-block: var(--space-6); }
/* The thread is a <section>: the generic `.article-page section` rule would
   give it a second rule and padding on a bill page. */
.cm-embed .cm-thread { margin-top: var(--space-2); padding: 0; border-top: 0; }
/* In an embed or a panel the count is a small label under the section's
   own heading, not a second heading the same size. */
.cm-embed .cm-count, .cm-panel .cm-count { margin: 0 0 var(--space-2); color: var(--muted); font: bold var(--text-min)/1.3 var(--ui-font); }
.debate-discussion { padding-bottom: var(--space-4); }
.debate-discussion .cm-embed { margin-block: var(--space-4) var(--space-6); }

/* Editing a comment in place (community.js). The box grows with the
   text (the script sets its height) up to this, then scrolls. */
.cm-actions[hidden] { display: none; }
.cm-edit-form { margin: var(--space-2) 0 var(--space-1); }
.cm-form textarea { max-height: 24rem; overflow-y: auto; }

/* A long comment is cut past its lines with a fade, and a Read more under
   it (community.js sets the clamp only where the text overflows), like a
   long statement in a speech bubble (styles.css). Fewer lines in the
   panel under a card. */
.cm-body.is-clamped {
  max-height: calc(1.5em * var(--cm-lines, 12));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5em), transparent);
}
.cm-compact { --cm-lines: 6; }
.cm-clamp-toggle { margin: 0 0 var(--space-1); }
.cm-clamp-toggle[hidden] { display: none; }

/* /comments: the newest comments across the site (community/recent.html).
   One linked card each (styles.css 7): who and when, the opening of the
   comment, then what it is about under a hairline. */
.cm-recent-list { display: grid; gap: var(--space-3); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.article-page .cm-recent-list li + li { margin-top: 0; }
a.card.cm-recent { display: grid; gap: var(--space-1); }
.cm-recent .cm-meta { font-family: var(--ui-font); font-size: .82rem; }
.cm-recent-excerpt { color: var(--body-copy); line-height: 1.5; overflow-wrap: anywhere; }
.cm-recent-about {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem var(--space-2);
  margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--subtle-line);
  font: .85rem/1.4 var(--ui-font);
}
.cm-recent-noun { color: var(--muted); font-size: .72rem; font-weight: bold; text-transform: uppercase; letter-spacing: .03em; }
.cm-recent-title { font-weight: bold; color: var(--ink); }
.cm-recent-title .party-badge { font-size: .7rem; font-weight: bold; }
.cm-recent-topic { font-weight: normal; color: var(--muted); }
a.cm-recent:hover .cm-recent-title { text-decoration: underline; text-underline-offset: 2px; }
.cm-recent-page .pagination { margin-top: var(--space-5); }
.cm-recent-page .empty-state { margin-top: var(--space-6); }