g-comments 0.0.0-stage → 0.1.0

package/styles/styles.css

@@ -0,0 +1,1145 @@
+/*
+ * g-comments default theme.
+ *
+ * Every rule is scoped to `.gc-root--styled` (the `unstyled` prop drops that
+ * class) and kept at one class of specificity with `:where()`, so your own
+ * class selectors override it when loaded after this file. Nothing outside the
+ * widget root is touched.
+ *
+ * Public tokens are `--gc-*`. Set them on the widget root (or through
+ * `appearance.variables`) or on any ancestor such as `:root`; whatever you set
+ * applies in every colour scheme. Unset tokens fall back to the defaults below,
+ * resolved into private `--_gc-*` variables.
+ */
+
+/* Tokens: light defaults */
+
+.gc-root--styled {
+  --_gc-font: var(
+    --gc-font,
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji"
+  );
+  --_gc-fg: var(--gc-fg, #1f2328);
+  --_gc-fg-muted: var(--gc-fg-muted, #59636e);
+  --_gc-bg: var(--gc-bg, #ffffff);
+  --_gc-bg-subtle: var(--gc-bg-subtle, #f6f8fa);
+  --_gc-border: var(--gc-border, #d1d9e0);
+  --_gc-accent: var(--gc-accent, #0969da);
+  --_gc-accent-fg: var(--gc-accent-fg, #ffffff);
+  --_gc-danger: var(--gc-danger, #cf222e);
+  --_gc-radius: var(--gc-radius, 8px);
+  --_gc-shadow: var(--gc-shadow, 0 1px 2px rgb(31 35 40 / 0.08), 0 8px 24px rgb(66 74 83 / 0.12));
+  --_gc-space: var(--gc-space, 0.5rem);
+  --_gc-avatar-size: var(--gc-avatar-size, 2.25rem);
+}
+
+.gc-root--styled[data-gc-theme="light"],
+.gc-root--styled[data-gc-theme="auto"] {
+  color-scheme: light;
+}
+
+/* Tokens: dark defaults */
+
+.gc-root--styled[data-gc-theme="dark"] {
+  --_gc-fg: var(--gc-fg, #e6edf3);
+  --_gc-fg-muted: var(--gc-fg-muted, #9198a1);
+  --_gc-bg: var(--gc-bg, #0d1117);
+  --_gc-bg-subtle: var(--gc-bg-subtle, #151b23);
+  --_gc-border: var(--gc-border, #3d444d);
+  --_gc-accent: var(--gc-accent, #4493f8);
+  --_gc-accent-fg: var(--gc-accent-fg, #0d1117);
+  --_gc-danger: var(--gc-danger, #f85149);
+  --_gc-shadow: var(--gc-shadow, 0 1px 2px rgb(1 4 9 / 0.4), 0 8px 24px rgb(1 4 9 / 0.6));
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  .gc-root--styled[data-gc-theme="auto"] {
+    --_gc-fg: var(--gc-fg, #e6edf3);
+    --_gc-fg-muted: var(--gc-fg-muted, #9198a1);
+    --_gc-bg: var(--gc-bg, #0d1117);
+    --_gc-bg-subtle: var(--gc-bg-subtle, #151b23);
+    --_gc-border: var(--gc-border, #3d444d);
+    --_gc-accent: var(--gc-accent, #4493f8);
+    --_gc-accent-fg: var(--gc-accent-fg, #0d1117);
+    --_gc-danger: var(--gc-danger, #f85149);
+    --_gc-shadow: var(--gc-shadow, 0 1px 2px rgb(1 4 9 / 0.4), 0 8px 24px rgb(1 4 9 / 0.6));
+    color-scheme: dark;
+  }
+}
+
+/* theme="inherit": derive the neutrals from the page's own text colour. */
+.gc-root--styled:not([data-gc-theme]) {
+  --_gc-fg: var(--gc-fg, currentColor);
+  --_gc-fg-muted: var(--gc-fg-muted, color-mix(in srgb, currentColor 68%, transparent));
+  --_gc-bg: var(--gc-bg, transparent);
+  --_gc-bg-subtle: var(--gc-bg-subtle, color-mix(in srgb, currentColor 6%, transparent));
+  --_gc-border: var(--gc-border, color-mix(in srgb, currentColor 22%, transparent));
+}
+
+/* Root */
+
+.gc-root--styled {
+  position: relative;
+  container: gc-root / inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--_gc-space) * 2);
+  min-width: 0;
+  font-family: var(--_gc-font);
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--_gc-fg);
+  background: var(--_gc-bg);
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+:where(.gc-root--styled),
+:where(.gc-root--styled) *,
+:where(.gc-root--styled) *::before,
+:where(.gc-root--styled) *::after {
+  box-sizing: border-box;
+}
+
+:where(.gc-root--styled) :focus-visible {
+  outline: 2px solid var(--_gc-accent);
+  outline-offset: 2px;
+}
+
+:where(.gc-root--styled) .gc-icon {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Buttons */
+
+:where(.gc-root--styled) .gc-button {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  min-height: 2.25rem;
+  margin: 0;
+  padding: 0 0.875rem;
+  border: 1px solid var(--_gc-border);
+  border-radius: var(--_gc-radius);
+  background: var(--_gc-bg);
+  color: var(--_gc-fg);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.2;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s,
+    color 0.15s;
+}
+
+:where(.gc-root--styled) .gc-button:hover:not(:disabled) {
+  background: var(--_gc-bg-subtle);
+}
+
+:where(.gc-root--styled) .gc-button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+:where(.gc-root--styled) .gc-button--primary {
+  border-color: var(--_gc-accent);
+  background: var(--_gc-accent);
+  color: var(--_gc-accent-fg);
+}
+
+:where(.gc-root--styled) .gc-button--primary:hover:not(:disabled) {
+  background: var(--_gc-accent);
+  background: color-mix(in srgb, var(--_gc-accent) 86%, var(--_gc-fg));
+}
+
+:where(.gc-root--styled) .gc-button--danger {
+  border-color: var(--_gc-danger);
+  background: var(--_gc-danger);
+  color: #ffffff;
+}
+
+:where(.gc-root--styled) .gc-button--danger:hover:not(:disabled) {
+  background: var(--_gc-danger);
+  background: color-mix(in srgb, var(--_gc-danger) 86%, var(--_gc-fg));
+}
+
+:where(.gc-root--styled) .gc-button--ghost {
+  border-color: transparent;
+  background: transparent;
+  color: var(--_gc-fg-muted);
+}
+
+:where(.gc-root--styled) .gc-button--ghost:hover:not(:disabled) {
+  background: var(--_gc-bg-subtle);
+  color: var(--_gc-fg);
+}
+
+:where(.gc-root--styled) .gc-button--small {
+  min-height: 2rem;
+  padding: 0 0.5rem;
+  font-size: 0.8125rem;
+}
+
+:where(.gc-root--styled) .gc-button--icon {
+  width: 2rem;
+  padding: 0;
+}
+
+:where(.gc-root--styled) .gc-button--link {
+  min-height: 0;
+  padding: 0.25rem 0;
+  border-color: transparent;
+  background: none;
+  color: var(--_gc-accent);
+}
+
+:where(.gc-root--styled) .gc-button--link:hover:not(:disabled) {
+  background: none;
+  text-decoration: underline;
+}
+
+/* Header */
+
+:where(.gc-root--styled) .gc-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--_gc-space);
+  padding-bottom: var(--_gc-space);
+  border-bottom: 1px solid var(--_gc-border);
+}
+
+:where(.gc-root--styled) .gc-header__count {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+:where(.gc-root--styled) .gc-sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--_gc-fg-muted);
+}
+
+:where(.gc-root--styled) .gc-sort__select {
+  min-height: 2rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--_gc-border);
+  border-radius: var(--_gc-radius);
+  background: var(--_gc-bg);
+  color: var(--_gc-fg);
+  font: inherit;
+}
+
+/* Sign-in panel */
+
+:where(.gc-root--styled) .gc-signin {
+  display: grid;
+  gap: var(--_gc-space);
+  padding: calc(var(--_gc-space) * 2);
+  border: 1px solid var(--_gc-border);
+  border-radius: var(--_gc-radius);
+  background: var(--_gc-bg-subtle);
+}
+
+:where(.gc-root--styled) .gc-signin__title {
+  margin: 0;
+  font-weight: 700;
+}
+
+:where(.gc-root--styled) .gc-signin__body {
+  margin: 0;
+  color: var(--_gc-fg-muted);
+  font-size: 0.9375rem;
+}
+
+:where(.gc-root--styled) .gc-signin__error {
+  margin: 0.25rem 0 0;
+  color: var(--_gc-danger);
+  font-size: 0.875rem;
+}
+
+:where(.gc-root--styled) .gc-signin__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--_gc-space);
+}
+
+:where(.gc-root--styled) .gc-signin--signed-in {
+  display: flex;
+  align-items: center;
+  gap: var(--_gc-space);
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--_gc-fg-muted);
+  font-size: 0.875rem;
+}
+
+:where(.gc-root--styled) .gc-signin__user {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Composer */
+
+:where(.gc-root--styled) .gc-composer {
+  display: grid;
+  gap: var(--_gc-space);
+}
+
+:where(.gc-root--styled) .gc-composer--replying,
+:where(.gc-root--styled) .gc-composer--editing {
+  margin-top: var(--_gc-space);
+}
+
+:where(.gc-root--styled) .gc-comment > .gc-composer {
+  margin-inline-start: calc(var(--_gc-avatar-size) + var(--_gc-space) * 1.5);
+}
+
+:where(.gc-root--styled) .gc-composer__guidelines {
+  justify-self: start;
+  color: var(--_gc-fg-muted);
+  font-size: 0.8125rem;
+}
+
+:where(.gc-root--styled) .gc-composer__context {
+  margin: 0;
+  color: var(--_gc-fg-muted);
+  font-size: 0.8125rem;
+}
+
+:where(.gc-root--styled) .gc-composer__tabs {
+  display: flex;
+  gap: 0.25rem;
+  border-bottom: 1px solid var(--_gc-border);
+}
+
+:where(.gc-root--styled) .gc-composer__tab {
+  appearance: none;
+  margin: 0 0 -1px;
+  padding: 0.375rem 0.625rem;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--_gc-fg-muted);
+  font: inherit;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+:where(.gc-root--styled) .gc-composer__tab[aria-selected="true"] {
+  border-bottom-color: var(--_gc-accent);
+  color: var(--_gc-fg);
+  font-weight: 600;
+}
+
+:where(.gc-root--styled) .gc-composer__panel {
+  display: grid;
+  gap: 0.25rem;
+}
+
+:where(.gc-root--styled) .gc-composer__panel[hidden] {
+  display: none;
+}
+
+:where(.gc-root--styled) .gc-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+}
+
+:where(.gc-root--styled) .gc-toolbar__button {
+  appearance: none;
+  display: inline-grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--_gc-radius) / 2);
+  background: none;
+  color: var(--_gc-fg-muted);
+  cursor: pointer;
+}
+
+:where(.gc-root--styled) .gc-toolbar__button:hover:not(:disabled) {
+  background: var(--_gc-bg-subtle);
+  color: var(--_gc-fg);
+}
+
+:where(.gc-root--styled) .gc-composer__field {
+  position: relative;
+}
+
+:where(.gc-root--styled) .gc-composer__input {
+  display: block;
+  width: 100%;
+  min-height: 5.5rem;
+  max-height: 24rem;
+  margin: 0;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--_gc-border);
+  border-radius: var(--_gc-radius);
+  background: var(--_gc-bg);
+  color: var(--_gc-fg);
+  font: inherit;
+  line-height: 1.5;
+  resize: vertical;
+  field-sizing: content;
+}
+
+:where(.gc-root--styled) .gc-composer--replying .gc-composer__input,
+:where(.gc-root--styled) .gc-composer--editing .gc-composer__input {
+  min-height: 4rem;
+}
+
+:where(.gc-root--styled) .gc-composer__input::placeholder {
+  color: var(--_gc-fg-muted);
+  opacity: 1;
+}
+
+:where(.gc-root--styled) .gc-composer__input:focus-visible {
+  border-color: var(--_gc-accent);
+  outline-offset: 0;
+}
+
+:where(.gc-root--styled) .gc-composer__input:disabled {
+  opacity: 0.7;
+}
+
+:where(.gc-root--styled) .gc-composer__preview {
+  min-height: 5.5rem;
+  padding: 0.625rem 0.75rem;
+  border: 1px dashed var(--_gc-border);
+  border-radius: var(--_gc-radius);
+}
+
+:where(.gc-root--styled) .gc-composer__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--_gc-space);
+}
+
+:where(.gc-root--styled) .gc-composer__messages {
+  flex: 1 1 12rem;
+  min-width: 0;
+  font-size: 0.8125rem;
+}
+
+:where(.gc-root--styled) .gc-composer__messages p {
+  margin: 0;
+}
+
+:where(.gc-root--styled) .gc-composer__hint,
+:where(.gc-root--styled) .gc-composer__status {
+  margin: 0;
+  color: var(--_gc-fg-muted);
+}
+
+:where(.gc-root--styled) .gc-composer__error {
+  color: var(--_gc-danger);
+}
+
+:where(.gc-root--styled) .gc-composer__buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--_gc-space);
+  margin-inline-start: auto;
+}
+
+/* Mention suggestions */
+
+:where(.gc-root--styled) .gc-mentions {
+  position: absolute;
+  z-index: 10;
+  top: calc(100% + 4px);
+  inset-inline-start: 0.5rem;
+  min-width: min(14rem, calc(100% - 1rem));
+  max-width: calc(100% - 1rem);
+  max-height: 15rem;
+  margin: 0;
+  padding: 0.25rem;
+  overflow-y: auto;
+  list-style: none;
+  border: 1px solid var(--_gc-border);
+  border-radius: var(--_gc-radius);
+  background: var(--_gc-bg);
+  box-shadow: var(--_gc-shadow);
+}
+
+:where(.gc-root--styled) .gc-mentions__option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: calc(var(--_gc-radius) / 2);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+:where(.gc-root--styled) .gc-mentions__option--active {
+  background: var(--_gc-bg-subtle);
+  background: color-mix(in srgb, var(--_gc-accent) 16%, transparent);
+}
+
+:where(.gc-root--styled) .gc-mentions__username {
+  font-weight: 600;
+}
+
+:where(.gc-root--styled) .gc-mentions__name {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--_gc-fg-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Avatars and badges */
+
+:where(.gc-root--styled) .gc-avatar {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  width: var(--_gc-avatar-size);
+  height: var(--_gc-avatar-size);
+  border-radius: 50%;
+  background: var(--_gc-bg-subtle);
+  color: var(--_gc-fg-muted);
+  font-size: calc(var(--_gc-avatar-size) * 0.42);
+  font-weight: 700;
+  object-fit: cover;
+}
+
+:where(.gc-root--styled) .gc-avatar--small {
+  --_gc-avatar-size: 1.5rem;
+}
+
+:where(.gc-root--styled) .gc-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0.375rem;
+  border: 1px solid var(--_gc-border);
+  border-radius: 999px;
+  color: var(--_gc-fg-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+}
+
+:where(.gc-root--styled) .gc-badge .gc-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+:where(.gc-root--styled) .gc-badge--staff,
+:where(.gc-root--styled) .gc-badge--featured {
+  border-color: var(--_gc-accent);
+  color: var(--_gc-accent);
+}
+
+/* Comment tree */
+
+:where(.gc-root--styled) .gc-list,
+:where(.gc-root--styled) .gc-replies,
+:where(.gc-root--styled) .gc-context {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where(.gc-root--styled) .gc-list {
+  display: grid;
+  gap: calc(var(--_gc-space) * 3);
+}
+
+:where(.gc-root--styled) .gc-list__status {
+  margin: 0;
+  color: var(--_gc-fg-muted);
+}
+
+:where(.gc-root--styled) .gc-replies {
+  display: grid;
+  gap: calc(var(--_gc-space) * 2);
+  margin-top: calc(var(--_gc-space) * 2);
+  margin-inline-start: calc(var(--_gc-avatar-size) / 2 - 1px);
+  padding-inline-start: calc(var(--_gc-avatar-size) / 2 + var(--_gc-space));
+  border-inline-start: 2px solid var(--_gc-border);
+}
+
+:where(.gc-root--styled) .gc-comment {
+  min-width: 0;
+}
+
+:where(.gc-root--styled) .gc-comment__card {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  column-gap: calc(var(--_gc-space) * 1.5);
+  border-radius: var(--_gc-radius);
+  scroll-margin-block: 4rem;
+}
+
+:where(.gc-root--styled) .gc-comment__card > * {
+  grid-column: 2;
+}
+
+:where(.gc-root--styled) .gc-comment__card > .gc-avatar {
+  grid-row: 1;
+  grid-column: 1;
+}
+
+:where(.gc-root--styled) .gc-comment__card:focus:not(:focus-visible) {
+  outline: none;
+}
+
+:where(.gc-root--styled) .gc-comment__card:focus-visible {
+  outline-offset: 4px;
+}
+
+:where(.gc-root--styled) .gc-comment__main {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+:where(.gc-root--styled) .gc-comment__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.5rem;
+  color: var(--_gc-fg-muted);
+  font-size: 0.875rem;
+}
+
+:where(.gc-root--styled) .gc-comment__author {
+  color: var(--_gc-fg);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+:where(.gc-root--styled) .gc-comment__time {
+  color: inherit;
+  text-decoration: none;
+}
+
+:where(.gc-root--styled) .gc-comment__author:hover,
+:where(.gc-root--styled) .gc-comment__time:hover {
+  text-decoration: underline;
+}
+
+:where(.gc-root--styled) .gc-comment__body--removed,
+:where(.gc-root--styled) .gc-comment__hidden-note {
+  margin: 0;
+  color: var(--_gc-fg-muted);
+  font-style: italic;
+}
+
+:where(.gc-root--styled) .gc-comment__hidden-note {
+  font-size: 0.8125rem;
+}
+
+:where(.gc-root--styled) .gc-comment__notice {
+  margin: 0.25rem 0 0;
+  color: var(--_gc-fg-muted);
+  font-size: 0.8125rem;
+}
+
+:where(.gc-root--styled) .gc-comment__notice--error {
+  color: var(--_gc-danger);
+}
+
+:where(.gc-root--styled) .gc-comment__more,
+:where(.gc-root--styled) .gc-comment__continue {
+  margin-top: var(--_gc-space);
+  margin-inline-start: calc(var(--_gc-avatar-size) + var(--_gc-space) * 1.5);
+  font-size: 0.875rem;
+}
+
+:where(.gc-root--styled) .gc-comment--pinned > .gc-comment__card {
+  padding: var(--_gc-space);
+  background: var(--_gc-bg-subtle);
+  box-shadow: inset 3px 0 0 var(--_gc-accent);
+}
+
+:where(.gc-root--styled) .gc-comment--highlighted > .gc-comment__card {
+  background: var(--_gc-bg-subtle);
+  background: color-mix(in srgb, var(--_gc-accent) 10%, transparent);
+  box-shadow: 0 0 0 var(--_gc-space) color-mix(in srgb, var(--_gc-accent) 10%, transparent);
+}
+
+/* Actions and menu */
+
+:where(.gc-root--styled) .gc-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  margin-inline-start: -0.5rem;
+}
+
+:where(.gc-root--styled) .gc-actions__like--active {
+  color: var(--_gc-danger);
+}
+
+:where(.gc-root--styled) .gc-actions__count {
+  font-variant-numeric: tabular-nums;
+}
+
+:where(.gc-root--styled) .gc-menu {
+  position: relative;
+}
+
+:where(.gc-root--styled) .gc-menu__list {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 4px);
+  inset-inline-end: 0;
+  min-width: 10rem;
+  margin: 0;
+  padding: 0.25rem;
+  list-style: none;
+  border: 1px solid var(--_gc-border);
+  border-radius: var(--_gc-radius);
+  background: var(--_gc-bg);
+  box-shadow: var(--_gc-shadow);
+}
+
+:where(.gc-root--styled) .gc-menu__item {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 0.5rem 0.625rem;
+  border: 0;
+  border-radius: calc(var(--_gc-radius) / 2);
+  background: none;
+  color: var(--_gc-fg);
+  font: inherit;
+  font-size: 0.875rem;
+  text-align: start;
+  cursor: pointer;
+}
+
+:where(.gc-root--styled) .gc-menu__item:hover,
+:where(.gc-root--styled) .gc-menu__item:focus {
+  background: var(--_gc-bg-subtle);
+}
+
+:where(.gc-root--styled) .gc-menu__item:focus-visible {
+  outline-offset: -2px;
+}
+
+:where(.gc-root--styled) .gc-menu__item--danger {
+  color: var(--_gc-danger);
+}
+
+/* Report and delete panels */
+
+:where(.gc-root--styled) .gc-report,
+:where(.gc-root--styled) .gc-confirm {
+  display: grid;
+  gap: var(--_gc-space);
+  margin-top: var(--_gc-space);
+  padding: calc(var(--_gc-space) * 1.5);
+  border: 1px solid var(--_gc-border);
+  border-radius: var(--_gc-radius);
+  background: var(--_gc-bg);
+  box-shadow: var(--_gc-shadow);
+}
+
+:where(.gc-root--styled) .gc-report form {
+  display: grid;
+  gap: var(--_gc-space);
+}
+
+:where(.gc-root--styled) .gc-report__options {
+  display: grid;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+:where(.gc-root--styled) .gc-report__title {
+  margin-bottom: 0.25rem;
+  padding: 0;
+  font-weight: 600;
+}
+
+:where(.gc-root--styled) .gc-report__option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9375rem;
+  cursor: pointer;
+}
+
+:where(.gc-root--styled) .gc-report__option input {
+  margin: 0;
+  accent-color: var(--_gc-accent);
+}
+
+:where(.gc-root--styled) .gc-report__message {
+  width: 100%;
+  margin: 0;
+  padding: 0.5rem 0.625rem;
+  border: 1px solid var(--_gc-border);
+  border-radius: var(--_gc-radius);
+  background: var(--_gc-bg);
+  color: var(--_gc-fg);
+  font: inherit;
+  resize: vertical;
+}
+
+:where(.gc-root--styled) .gc-report__error {
+  margin: 0;
+  color: var(--_gc-danger);
+  font-size: 0.875rem;
+}
+
+:where(.gc-root--styled) .gc-confirm__text {
+  margin: 0;
+  font-weight: 600;
+}
+
+:where(.gc-root--styled) .gc-report__buttons,
+:where(.gc-root--styled) .gc-confirm__buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--_gc-space);
+}
+
+/* Notices, new-comments pill, load more */
+
+:where(.gc-root--styled) .gc-notice {
+  margin: 0;
+  padding: var(--_gc-space) calc(var(--_gc-space) * 1.5);
+  border: 1px solid var(--_gc-border);
+  border-radius: var(--_gc-radius);
+  background: var(--_gc-bg-subtle);
+  color: var(--_gc-fg-muted);
+  font-size: 0.9375rem;
+}
+
+:where(.gc-root--styled) .gc-notice--error {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--_gc-space);
+  color: var(--_gc-fg);
+}
+
+:where(.gc-root--styled) .gc-notice__text {
+  margin: 0;
+}
+
+:where(.gc-root--styled) .gc-notice--pending {
+  border-color: var(--_gc-accent);
+  color: var(--_gc-fg);
+}
+
+:where(.gc-root--styled) .gc-pending-region {
+  display: grid;
+  gap: var(--_gc-space);
+}
+
+/* Empty live regions stay in the accessibility tree but take no space. */
+:where(.gc-root--styled) .gc-pill-region:empty,
+:where(.gc-root--styled) .gc-pending-region:empty {
+  position: absolute;
+}
+
+:where(.gc-root--styled) .gc-pill-region {
+  position: sticky;
+  z-index: 5;
+  top: 0.75rem;
+  display: flex;
+  justify-content: center;
+}
+
+:where(.gc-root--styled) .gc-pill {
+  border-color: var(--_gc-accent);
+  border-radius: 999px;
+  background: var(--_gc-accent);
+  color: var(--_gc-accent-fg);
+  box-shadow: var(--_gc-shadow);
+}
+
+:where(.gc-root--styled) .gc-pill:hover:not(:disabled) {
+  background: var(--_gc-accent);
+  background: color-mix(in srgb, var(--_gc-accent) 86%, var(--_gc-fg));
+}
+
+:where(.gc-root--styled) .gc-load-more {
+  align-self: center;
+}
+
+/* Focused branch ("Continue this thread") */
+
+:where(.gc-root--styled) .gc-focus {
+  display: grid;
+  gap: calc(var(--_gc-space) * 2);
+}
+
+:where(.gc-root--styled) .gc-focus__back {
+  justify-self: start;
+}
+
+:where(.gc-root--styled) .gc-focus__truncated {
+  margin: 0;
+  color: var(--_gc-fg-muted);
+  font-size: 0.875rem;
+}
+
+:where(.gc-root--styled) .gc-context {
+  display: grid;
+  gap: calc(var(--_gc-space) * 1.5);
+  padding-inline-start: calc(var(--_gc-space) * 1.5);
+  border-inline-start: 2px dashed var(--_gc-border);
+}
+
+/* Developer diagnostics */
+
+:where(.gc-root--styled) .gc-devpanel {
+  display: grid;
+  gap: var(--_gc-space);
+  padding: calc(var(--_gc-space) * 1.5) calc(var(--_gc-space) * 2);
+  border: 1px dashed var(--_gc-danger);
+  border-radius: var(--_gc-radius);
+  background: var(--_gc-bg-subtle);
+  font-size: 0.875rem;
+}
+
+:where(.gc-root--styled) .gc-devpanel--ok {
+  border-color: var(--_gc-border);
+}
+
+:where(.gc-root--styled) .gc-devpanel__title {
+  margin: 0;
+  font-weight: 700;
+}
+
+:where(.gc-root--styled) .gc-devpanel--ok .gc-devpanel__title {
+  cursor: pointer;
+}
+
+:where(.gc-root--styled) .gc-devpanel__summary,
+:where(.gc-root--styled) .gc-devpanel__note {
+  margin: 0;
+}
+
+:where(.gc-root--styled) .gc-devpanel__note {
+  color: var(--_gc-fg-muted);
+  font-size: 0.8125rem;
+}
+
+:where(.gc-root--styled) .gc-devpanel__causes {
+  display: grid;
+  gap: 0.375rem;
+  margin: 0;
+  padding-inline-start: 1.25rem;
+}
+
+:where(.gc-root--styled) .gc-devpanel a {
+  color: var(--_gc-accent);
+}
+
+:where(.gc-root--styled) .gc-devpanel__code {
+  margin: 0.375rem 0 0;
+  padding: 0.5rem 0.625rem;
+  overflow-x: auto;
+  border-radius: calc(var(--_gc-radius) / 2);
+  background: var(--_gc-bg);
+  font-size: 0.8125rem;
+}
+
+:where(.gc-root--styled) .gc-devpanel__details {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 0.25rem 0.75rem;
+  margin: 0;
+}
+
+:where(.gc-root--styled) .gc-devpanel__details dt {
+  color: var(--_gc-fg-muted);
+  font-weight: 600;
+}
+
+:where(.gc-root--styled) .gc-devpanel__details dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+/* Cooked comment HTML */
+
+:where(.gc-root--styled) .gc-prose {
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+
+:where(.gc-root--styled) .gc-prose > :first-child {
+  margin-top: 0;
+}
+
+:where(.gc-root--styled) .gc-prose > :last-child {
+  margin-bottom: 0;
+}
+
+:where(.gc-root--styled) .gc-prose :is(p, ul, ol, blockquote, pre, table, aside, details) {
+  margin: 0 0 0.75em;
+}
+
+:where(.gc-root--styled) .gc-prose :is(h1, h2, h3, h4, h5, h6) {
+  margin: 1em 0 0.5em;
+  font-size: 1.05em;
+  line-height: 1.3;
+}
+
+:where(.gc-root--styled) .gc-prose a {
+  color: var(--_gc-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+:where(.gc-root--styled) .gc-prose :is(ul, ol) {
+  padding-inline-start: 1.5em;
+}
+
+:where(.gc-root--styled) .gc-prose blockquote {
+  margin-inline: 0;
+  padding: 0.25em 0 0.25em 1em;
+  border-inline-start: 3px solid var(--_gc-border);
+  color: var(--_gc-fg-muted);
+}
+
+:where(.gc-root--styled) .gc-prose code {
+  padding: 0.1em 0.35em;
+  border-radius: 4px;
+  background: var(--_gc-bg-subtle);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875em;
+}
+
+:where(.gc-root--styled) .gc-prose pre {
+  padding: 0.75em 1em;
+  overflow-x: auto;
+  border-radius: var(--_gc-radius);
+  background: var(--_gc-bg-subtle);
+}
+
+:where(.gc-root--styled) .gc-prose pre code {
+  padding: 0;
+  background: none;
+}
+
+:where(.gc-root--styled) .gc-prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: calc(var(--_gc-radius) / 2);
+}
+
+:where(.gc-root--styled) .gc-prose img.emoji {
+  width: 1.25em;
+  height: 1.25em;
+  border-radius: 0;
+  vertical-align: text-bottom;
+}
+
+:where(.gc-root--styled) .gc-prose hr {
+  margin: 1em 0;
+  border: 0;
+  border-top: 1px solid var(--_gc-border);
+}
+
+:where(.gc-root--styled) .gc-prose table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+}
+
+:where(.gc-root--styled) .gc-prose :is(th, td) {
+  padding: 0.25em 0.5em;
+  border: 1px solid var(--_gc-border);
+}
+
+:where(.gc-root--styled) .gc-prose aside.onebox {
+  padding: 0.75em 1em;
+  border: 1px solid var(--_gc-border);
+  border-radius: var(--_gc-radius);
+}
+
+:where(.gc-root--styled) .gc-prose .mention {
+  padding: 0 0.2em;
+  border-radius: 4px;
+  background: var(--_gc-bg-subtle);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+:where(.gc-root--styled) .gc-prose .lightbox-wrapper .meta {
+  display: none;
+}
+
+/* Narrow containers (phones, sidebars): tighter avatars and indentation. */
+
+@container gc-root (max-width: 30rem) {
+  :where(.gc-root--styled) :is(.gc-list, .gc-focus, .gc-composer) {
+    --_gc-avatar-size: var(--gc-avatar-size, 2rem);
+  }
+
+  :where(.gc-root--styled) .gc-comment__card {
+    column-gap: var(--_gc-space);
+  }
+
+  :where(.gc-root--styled) .gc-replies {
+    margin-inline-start: 0;
+    padding-inline-start: calc(var(--_gc-space) * 1.5);
+  }
+
+  :where(.gc-root--styled) .gc-comment__more,
+  :where(.gc-root--styled) .gc-comment__continue,
+  :where(.gc-root--styled) .gc-comment > .gc-composer {
+    margin-inline-start: 0;
+  }
+
+  :where(.gc-root--styled) .gc-composer__buttons {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.gc-root--styled) * {
+    transition: none !important;
+  }
+}