/* Defaults live at the point of use so ancestor custom properties can inherit. */
.commentail, .commentail-action {
  box-sizing: border-box; width: 100%; max-width: var(--commentail-max-width, 48rem); min-width: 0;
  font-family: var(--commentail-font-family, inherit); font-size: var(--commentail-font-size, inherit);
  line-height: var(--commentail-line-height, inherit); color: var(--commentail-color-text, inherit);
  background: var(--commentail-color-surface, transparent); overflow-wrap: anywhere;
}
.commentail-page, .commentail-action { width: min(100%, 50rem); margin: 2rem auto; padding: 1rem; box-sizing: border-box; }
.commentail *, .commentail *::before, .commentail *::after, .commentail-action * { box-sizing: border-box; }
.commentail a { color: var(--commentail-color-accent, currentColor); text-underline-offset: .2em; }
.commentail-header h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem; font-size: 1.45em; }
.commentail-count { font-size: .65em; padding: .15em .6em; border: 1px solid var(--commentail-color-border, currentColor); border-radius: 2em; }
.commentail-form, .commentail-edit-form, .commentail-action form { display: grid; gap: calc(var(--commentail-spacing, 1rem) * .75); margin-bottom: calc(var(--commentail-spacing, 1rem) * 1.5); }
.commentail .commentail-reply-form { margin: var(--commentail-spacing, 1rem) 0 0; }
.commentail-reply-context { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; margin: 0; font-size: .9em; }
.commentail-form label, .commentail-edit-form label { display: grid; gap: .3rem; font-weight: 500; }
.commentail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.commentail .commentail-input, .commentail-action .commentail-input {
  display: block; width: 100%; min-width: 0; padding: .7rem .85rem;
  border: 1px solid var(--commentail-color-border, currentColor); border-radius: var(--commentail-border-radius, .75rem);
  font: inherit; color: inherit; background: var(--commentail-color-input-surface, transparent);
}
.commentail textarea.commentail-input, .commentail-action textarea.commentail-input {
  min-height: var(--commentail-input-min-height, 6rem); max-height: var(--commentail-input-max-height, 24rem);
  resize: none; overflow: auto;
}
.commentail .commentail-check { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.commentail-button, .commentail-action button {
  display: inline-block; justify-self: start; max-width: 100%; padding: .65rem 1rem;
  border: 1px solid var(--commentail-color-border, currentColor); border-radius: var(--commentail-border-radius, .75rem);
  color: var(--commentail-color-button-text, var(--commentail-color-accent, inherit)); background: var(--commentail-color-button-surface, transparent); font: inherit; cursor: pointer;
  text-align: center; text-decoration: none;
}
.commentail a.commentail-button { color: var(--commentail-color-button-text, var(--commentail-color-accent, inherit)); }
.commentail .commentail-secondary { background: transparent; border-color: var(--commentail-color-border, currentColor); color: var(--commentail-color-accent, currentColor); }
.commentail :focus-visible, .commentail-action :focus-visible { outline: 2px solid var(--commentail-color-accent, currentColor); outline-offset: 3px; }
.commentail-comment { display: flex; gap: .75rem; padding: 1.25rem 0; border-top: 1px solid var(--commentail-color-border, currentColor); }
.commentail-avatar { flex: 0 0 var(--commentail-avatar-size, 2.5rem); width: var(--commentail-avatar-size, 2.5rem); height: var(--commentail-avatar-size, 2.5rem); display: grid; place-items: center; border-radius: 50%; background: linear-gradient(130deg, hsl(var(--commentail-avatar-hue) 55% 42%), hsl(calc(var(--commentail-avatar-hue) + 50) 60% 32%)); color: white; font-size: .8em; font-weight: 650; }
.commentail-content { min-width: 0; flex: 1; }
.commentail-content header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; }
.commentail .commentail-staff-name {
  display: inline-block; max-width: 100%; min-width: 0; padding: .1em .5em;
  border-radius: .4em;
  color: var(--commentail-color-staff-text, #244fa6);
  background: var(--commentail-color-staff-surface, #e8efff);
}
.commentail-avatar-wrap {
  position: relative; display: inline-block; vertical-align: middle;
  flex: 0 0 var(--commentail-avatar-size, 2.5rem);
  width: var(--commentail-avatar-size, 2.5rem); height: var(--commentail-avatar-size, 2.5rem);
}
.commentail-crown {
  position: absolute; z-index: 1; top: -18%; right: -10%; width: 52%; height: 52%;
  transform: rotate(15deg); fill: #e7b94c;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 25%));
}
.commentail-crown-band { fill: none; stroke: #b88426; stroke-width: 1.2; }
.commentail-pending-author { display: flex; align-items: center; gap: .75rem; }
.commentail-pending-author > div { min-width: 0; }
@supports (color: color-mix(in srgb, currentColor, transparent)) {
  .commentail .commentail-staff-name {
    color: var(--commentail-color-staff-text, var(--commentail-color-accent, inherit));
    background: var(--commentail-color-staff-surface, color-mix(in srgb, currentColor 12%, transparent));
  }
}
.commentail .commentail-staff-name.commentail-superuser-name {
  color: var(--commentail-color-superuser-text, #795400);
  background: var(--commentail-color-superuser-surface, #ffedb5);
}
.commentail .commentail-date, .commentail-muted { color: var(--commentail-color-muted, inherit); font-size: .85em; }
.commentail-text { white-space: pre-wrap; margin: .5rem 0; }
.commentail-content footer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .65rem; font-size: .85em; }
.commentail-replies { padding-left: calc(var(--commentail-avatar-size, 2.5rem) + .75rem); }
.commentail-expand { display: inline-block; margin: 0 0 1rem; }
.commentail-pending { padding: 1rem; margin-bottom: 1rem; border: 1px dashed var(--commentail-color-border, currentColor); border-radius: var(--commentail-border-radius, .75rem); }
.commentail-status { display: block; color: var(--commentail-color-muted, inherit); font-size: .85em; }
.commentail-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.commentail-error { padding: .75rem; border: 1px solid var(--commentail-color-error, currentColor); border-radius: var(--commentail-border-radius, .75rem); }
@media (max-width: 480px) { .commentail-fields { grid-template-columns: minmax(0, 1fr); } .commentail-replies { padding-left: 1rem; } .commentail-page { margin: 0 auto; padding: .75rem; } }

.commentail-avatar { position: relative; overflow: hidden; }
.commentail-avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.commentail-avatar { background-image: var(--commentail-avatar-background, var(--commentail-generated-avatar)); }

.commentail[aria-busy="true"] .commentail-button { opacity: .65; cursor: progress; }
.commentail [hidden] { display: none !important; }

/* Keep the host's color scheme, including when it differs from the OS theme. */
.commentail .commentail-input::placeholder, .commentail-action .commentail-input::placeholder {
  color: var(--commentail-color-muted, inherit); opacity: 1;
}
.commentail input[type="checkbox"], .commentail-action input[type="checkbox"] {
  color: inherit; accent-color: var(--commentail-color-accent, currentColor);
}
@supports (color: color-mix(in srgb, currentColor, transparent)) {
  .commentail-comment, .commentail-count, .commentail-pending {
    border-color: var(--commentail-color-border, color-mix(in srgb, currentColor 25%, transparent));
  }
  .commentail .commentail-input, .commentail-action .commentail-input {
    border-color: var(--commentail-color-border, color-mix(in srgb, currentColor 60%, transparent));
    background: var(--commentail-color-input-surface, color-mix(in srgb, currentColor 3%, transparent));
  }
  .commentail-button, .commentail-action button {
    border-color: var(--commentail-color-border, color-mix(in srgb, currentColor 60%, transparent));
    background: var(--commentail-color-button-surface, color-mix(in srgb, currentColor 8%, transparent));
  }
  .commentail-button:hover, .commentail-action button:hover {
    background: var(--commentail-color-button-hover, color-mix(in srgb, currentColor 15%, transparent));
  }
}

/* Standalone actions have no host page from which to inherit typography/theme.
   Keep every document rule scoped so embedded widgets retain their host styles. */
.commentail-document {
  color-scheme: light;
  --commentail-document-default-background: #f2f4f7;
  --commentail-document-default-surface: #fafbfc;
  --commentail-document-default-text: #252c38;
  --commentail-document-default-accent: #3c526c;
  margin: 0; min-height: 100vh; padding: 1rem;
  background: var(--commentail-document-background, var(--commentail-document-default-background));
  color: var(--commentail-color-text, var(--commentail-document-default-text));
  font-family: var(--commentail-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: var(--commentail-font-size, 1rem); line-height: 1.6;
}
.commentail-document .commentail-action {
  max-width: var(--commentail-max-width, 38rem); margin: clamp(1rem, 7vh, 5rem) auto;
  padding: clamp(1.25rem, 5vw, 2.5rem);
  background: var(--commentail-color-surface, var(--commentail-document-default-surface));
  border: 1px solid var(--commentail-color-border, #d4dae2);
  border-radius: var(--commentail-border-radius, 1.25rem);
  box-shadow: var(--commentail-document-shadow, 0 12px 40px rgb(20 30 45 / 6%));
}
.commentail-action-header { margin-bottom: 1.5rem; }
.commentail-action-icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.25rem;
  border: 1px solid var(--commentail-color-border, currentColor); border-radius: .9rem;
  color: var(--commentail-color-accent, inherit);
}
.commentail-action-icon svg { display: block; width: 1.5rem; height: 1.5rem; }
.commentail-action-eyebrow { margin: 0 0 .35rem; font-size: .8rem; font-weight: 650; letter-spacing: .06em; }
.commentail-action-header h1 { margin: 0; font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.25; font-weight: 650; }
.commentail-action-description { margin: 0 0 1.5rem; }
.commentail-action-notice, .commentail-action-quote {
  margin: 0 0 1.5rem; padding: 1rem;
  border-inline-start: 3px solid var(--commentail-color-accent, currentColor);
  background: var(--commentail-color-input-surface, transparent);
}
.commentail-action-footer { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--commentail-color-border, currentColor); font-size: .9rem; }
.commentail-document .commentail-form { margin-bottom: 0; }
.commentail-document .commentail-button { padding: .8rem 1.1rem; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .commentail-document {
    color-scheme: dark;
    --commentail-document-default-background: #191d24;
    --commentail-document-default-surface: #222832;
    --commentail-document-default-text: #e2e7ef;
    --commentail-document-default-accent: #bacde5;
  }
  .commentail-document .commentail-action { border-color: var(--commentail-color-border, #414b59); }
}
@supports (color: color-mix(in srgb, currentColor, transparent)) {
  .commentail-document .commentail-action, .commentail-action-icon, .commentail-action-footer {
    border-color: var(--commentail-color-border, color-mix(in srgb, currentColor 18%, transparent));
  }
  .commentail-action-notice, .commentail-action-quote {
    background: var(--commentail-color-input-surface, color-mix(in srgb, currentColor 4%, transparent));
  }
}
@media (max-width: 480px) {
  .commentail-document { padding: .75rem; }
  .commentail-document .commentail-action { margin: .75rem auto; }
  .commentail-document .commentail-button { width: 100%; }
}

.commentail-document a { color: var(--commentail-color-accent, var(--commentail-document-default-accent)); }
.commentail-document .commentail-button {
  color: var(--commentail-color-button-text, var(--commentail-color-accent, var(--commentail-document-default-accent)));
}

.commentail-editor { margin-top: var(--commentail-spacing, 1rem); }

/* Quiet actions: only interaction reveals a surface. */
.commentail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem .85rem; }
.commentail a.commentail-control {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.1rem; max-width: 100%; padding: .3rem .6rem;
  border: 0; border-radius: var(--commentail-border-radius, .75rem);
  color: var(--commentail-color-accent, currentColor);
  background: var(--commentail-color-control-surface, transparent);
  font: inherit; font-weight: 500; line-height: 1.4; text-align: center;
  text-decoration: none;
}
/* Keep cancellation visually subordinate to submission. */
.commentail a.commentail-control[data-commentail-cancel] {
  min-height: 2rem; padding: .25rem .5rem;
  border: 1px solid transparent; background: transparent;
  font-size: .875em; font-weight: 400;
}
.commentail a.commentail-control[data-commentail-cancel]:is(:hover, :focus-visible) {
  border-color: var(--commentail-color-border, currentColor);
  background: var(--commentail-color-control-hover, ButtonFace);
}
.commentail-actions .commentail-secondary { border-color: transparent; }
.commentail a.commentail-control:hover { text-decoration: none; }
.commentail-menu { position: relative; margin-inline-start: auto; flex: 0 0 auto; align-self: flex-start; }
.commentail-menu summary {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin: -.3rem 0;
  list-style: none; cursor: pointer; border-radius: 50%;
  font-size: 1.4em; line-height: 1; color: var(--commentail-color-muted, inherit);
}
.commentail-menu summary::-webkit-details-marker { display: none; }
.commentail-menu-panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + .4rem); z-index: 2;
  min-width: 10rem; max-width: calc(100vw - 3rem); padding: .3rem;
  border: 1px solid var(--commentail-color-border, currentColor);
  border-radius: var(--commentail-border-radius, .75rem);
  background: var(--commentail-color-menu-surface, Canvas);
  color: var(--commentail-color-menu-text, CanvasText);
  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
}
.commentail .commentail-menu-panel a {
  display: block; padding: .5rem .75rem; border-radius: .5rem;
  color: inherit; font-size: .9em; text-decoration: none;
}
@supports (color: color-mix(in srgb, currentColor, transparent)) {
  .commentail a.commentail-control:hover, .commentail-actions .commentail-secondary:hover,
  .commentail a.commentail-control[data-commentail-cancel]:is(:hover, :focus-visible),
  .commentail-menu summary:hover, .commentail-menu[open] summary, .commentail-menu-panel a:hover {
    background: var(--commentail-color-control-hover, color-mix(in srgb, currentColor 8%, transparent));
  }
  .commentail-menu-panel {
    background: var(--commentail-color-menu-surface, color-mix(in srgb, Canvas 97%, CanvasText));
    border-color: var(--commentail-color-border, color-mix(in srgb, currentColor 18%, transparent));
  }
}

/* Keep helper copy close to the fields it explains. */
.commentail .commentail-form { gap: calc(var(--commentail-spacing, 1rem) * .5); }
.commentail .commentail-form > .commentail-muted {
  margin: 0; font-size: .8em; line-height: 1.4;
}
.commentail-captcha { display: grid; gap: .3rem; margin-top: .25rem; }
.commentail-captcha-actions { display: flex; align-items: center; gap: .4rem .6rem; }
.commentail .commentail-captcha-actions > .commentail-input { width: 5rem; flex: 0 1 5rem; text-align: center; }
.commentail .commentail-captcha-refresh {
  min-height: 2rem; min-width: 0; max-width: 100%; padding: .25rem .5rem;
  border: 1px solid transparent; border-radius: var(--commentail-border-radius, .75rem);
  color: var(--commentail-color-accent, currentColor); background: transparent;
  font: inherit; font-size: .875em; cursor: pointer;
}
.commentail .commentail-captcha-refresh:is(:hover, :focus-visible) {
  border-color: var(--commentail-color-border, currentColor);
  background: var(--commentail-color-control-hover, ButtonFace);
}
.commentail .commentail-primary {
  font-weight: 600; border-width: 2px;
  color: var(--commentail-color-button-text, inherit);
}
@supports (color: color-mix(in srgb, currentColor, transparent)) {
  .commentail .commentail-primary {
    background: var(--commentail-color-button-surface, color-mix(in srgb, currentColor 12%, transparent));
  }
  .commentail .commentail-primary:hover {
    background: var(--commentail-color-button-hover, color-mix(in srgb, currentColor 18%, transparent));
  }
  .commentail .commentail-form > .commentail-muted {
    color: var(--commentail-color-muted, color-mix(in srgb, currentColor 70%, transparent));
  }
  .commentail .commentail-captcha-refresh:is(:hover, :focus-visible) {
    background: var(--commentail-color-control-hover, color-mix(in srgb, currentColor 8%, transparent));
  }
}