/* Public text (left) and a clearly separate, Charter-permission-only discussion (right). Stacked when narrow.
   Buttons, fields, chips, edit panel and history come from kwl.css so the Charter matches Watchlist and Transfers. */
.kwl.kwl-charter { width: 100%; min-width: 0; max-width: 100%; display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; container: kwlc-layout / inline-size;
  --kwlc-pending: #b45309; --kwlc-done: var(--kwl-good); --kwlc-rejected: var(--kwl-bad); }
.kwl.kwl-charter.kwl-dark { --kwlc-pending: #f59e0b; --kwlc-done: #4ade80; --kwlc-rejected: #f87171; }
/* Inline-size containment removes the discussion's intrinsic width. Explicit sizing
   prevents themes using justify-items:start / justify-self:start from collapsing it. */
/* The discussion gets the larger share (about 62%); both stack once there is not room for two columns. */
.kwl.kwl-charter > section { min-width: 0; max-width: 100%; margin-inline: 0; box-sizing: border-box; }
.kwl.kwl-charter > .kwlc-public { flex: 2 1 17rem; }
.kwl.kwl-charter > #kwl-charter-app { flex: 3 1 30rem; }
.kwl-charter > section > h2 { margin: 0 0 1rem; font-size: 1.25em; }
.kwl-charter .kwlc-updated { margin: -.6rem 0 1rem; }
#kwlc-public-text { line-height: 1.65; overflow-wrap: anywhere; }
#kwlc-public-text h2, #kwlc-public-text h3 { margin-top: 1.2rem; }
#kwl-charter-app { border-left: 1px solid var(--kwl-line, #ccc); padding-left: 1.5rem; container-type: inline-size; }
#kwl-charter-app h2 { margin: 0 0 1rem; font-size: 1.25em; }
#kwl-charter-app .kwl-toolbar .kwl-actions { margin-left: auto; }
#kwl-charter-app .kwlc-refresh .kwl-ico { margin: 0; }
#kwl-charter-app .kwlc-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; }
#kwl-charter-app .kwlc-note .kwl-ico { margin-top: 2px; opacity: .8; }
#kwl-charter-app .kwlc-composer { margin: 0 0 16px; }
#kwl-charter-app .kwlc-composer .kwl-btn .kwl-ico, #kwl-charter-app .kwlc-replyform .kwl-btn .kwl-ico { margin-right: 6px; }

/* Filter chips + sort */
#kwl-charter-app .kwlc-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 0 0 12px; }
#kwl-charter-app .kwlc-chips { margin: 0; }
#kwl-charter-app .kwlc-chip-pending.kwl-on { background: var(--kwlc-pending); border-color: var(--kwlc-pending); }
#kwl-charter-app .kwlc-chip-done.kwl-on { background: var(--kwlc-done); border-color: var(--kwlc-done); color: #fff; }
#kwl-charter-app .kwlc-chip-rejected.kwl-on { background: var(--kwlc-rejected); border-color: var(--kwlc-rejected); }
#kwl-charter-app .kwlc-sort { display: flex; align-items: center; gap: 8px; }
#kwl-charter-app .kwlc-sort label { font-size: 13px; font-weight: 600; margin: 0; }
#kwl-charter-app .kwlc-sort select { height: 32px; min-height: 32px; padding: 0 2rem 0 10px; border-radius: var(--kwl-radius); font-size: .85em; }

/* Comment cards */
.kwlc-thread { border: 1px solid var(--kwl-line, #ccc); border-left: 4px solid var(--kwlc-pending); border-radius: var(--kwl-radius, 6px); padding: .875rem 1rem; margin: 0 0 .75rem; }
.kwlc-thread.kwlc-t-done { border-left-color: var(--kwlc-done); }
.kwlc-thread.kwlc-t-rejected { border-left-color: var(--kwlc-rejected); }
.kwlc-thread-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.kwlc-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.kwlc-meta { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: .85em; opacity: .8; }
.kwlc-dot { opacity: .6; }
.kwlc-thread-head .kwlc-meta { margin-left: auto; }
.kwlc-status { display: inline-block; font-size: .75em; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 999px; padding: 2px 10px; white-space: nowrap; color: var(--kwlc-pending);
  border: 1px solid currentColor; background: color-mix(in srgb, currentColor 12%, transparent); }
.kwlc-done { color: var(--kwlc-done); }
.kwlc-rejected { color: var(--kwlc-rejected); }
.kwlc-copy { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.kwlc-thread > .kwlc-copy { margin: .6rem 0 .75rem; }
.kwlc-foot { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.kwlc-votes, .kwlc-foot-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kwlc-vote { min-width: 3.5rem; font-variant-numeric: tabular-nums; }
.kwlc-score { font-size: .8em; font-weight: 600; opacity: .75; margin-left: 4px; font-variant-numeric: tabular-nums; }
.kwlc-score.kwlc-pos { color: var(--kwlc-done); opacity: 1; }
.kwlc-score.kwlc-neg { color: var(--kwlc-rejected); opacity: 1; }

/* Replies */
.kwlc-replies { margin-top: .875rem; padding-top: .75rem; border-top: 1px solid var(--kwl-line, #ccc); }
.kwlc-reply { border-left: 2px solid var(--kwl-line, #ccc); padding-left: .75rem; margin: 0 0 .75rem; }
.kwlc-reply .kwlc-copy { margin: .25rem 0 0; }
.kwlc-reply-decision { border-left-color: var(--kwl-accent); }
.kwlc-reply-reopen { border-left-color: var(--kwlc-pending); }
.kwlc-tag { font-size: .85em; font-weight: 700; padding: 0 8px; border-radius: 999px; border: 1px solid var(--kwl-line); }
.kwlc-replyform label { display: block; margin: .5rem 0 .4rem; font-size: 13px; font-weight: 600; }
.kwlc-replyform textarea, .kwlc-composer textarea { width: 100%; max-width: 100%; min-height: 5rem; resize: vertical; padding: .65rem .75rem; margin: 0; border-radius: var(--kwl-radius); }
.kwlc-replyform .kwl-count { margin-bottom: .5rem; }

/* Administrator decision */
.kwlc-decision { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .875rem; padding: .625rem .75rem; border: 1px dashed var(--kwl-line); border-radius: var(--kwl-radius); background: var(--kwl-surface); }
.kwlc-decision-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; flex-basis: 100%; }
.kwlc-decision select, .kwlc-decision input { height: var(--kwl-h); min-height: var(--kwl-h); padding: 0 .6rem; border-radius: var(--kwl-radius); min-width: 0; }
.kwlc-decision select { padding-right: 2rem; }
.kwlc-decision input { flex: 1; min-width: 8rem; }

@container (max-width: 520px) {
  #kwl-charter-app .kwl-actions { margin-left: 0; width: 100%; justify-content: flex-start; }
  #kwl-charter-app .kwl-actions .kwl-who { flex-basis: 100%; margin-bottom: 4px; }
  #kwl-charter-app .kwl-actions .kwl-btn { flex: 0 1 auto; }
  .kwlc-thread-head .kwlc-meta { margin-left: 0; flex-basis: 100%; }
  .kwlc-foot { align-items: stretch; }
  .kwlc-foot-acts { flex: 1 1 100%; justify-content: flex-start; }
  .kwlc-foot-acts .kwl-btn { flex: 0 1 auto; }
  .kwlc-decision input, .kwlc-decision select { flex-basis: 100%; }
  #kwl-charter-app .kwlc-filters { flex-direction: column; align-items: flex-start; }
  #kwl-charter-app .kwlc-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  #kwl-charter-app .kwlc-chips .kwl-btn { flex: 0 0 auto; }
  #kwl-charter-app .kwlc-sort select { flex: 1; }
  .kwlc-tagpick { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
  .kwlc-tagpick .kwlc-tagopt { flex: 0 0 auto; }
}
@media (max-width: 760px) {
  .kwl.kwl-charter { gap: 1.5rem; }
  #kwl-charter-app { border-left: 0; border-top: 1px solid var(--kwl-line, #ccc); padding-left: 0; padding-top: 1.5rem; }
  #kwl-charter-app .kwl-actions .kwl-who { flex-basis: 100%; }
}
/* Two readable 24rem columns plus the 2rem gap need at least 50rem.
   Also stack inside narrow desktop content areas, not only on small screens. */
@container kwlc-layout (max-width: 49.999rem) {
  #kwl-charter-app { border-left: 0; border-top: 1px solid var(--kwl-line, #ccc); padding-left: 0; padding-top: 1.5rem; }
}

/* Tags */
.kwlc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: .5rem 0 0; }
.kwlc-tagpill { display: inline-block; font-size: .78em; font-weight: 600; padding: 1px 9px; border-radius: 999px; color: inherit;
  border: 1px solid var(--kwlc-tag); background: color-mix(in srgb, var(--kwlc-tag) 16%, transparent); }
#kwl-charter-app .kwlc-tagchips { margin: 8px 0 12px; align-items: center; }
#kwl-charter-app .kwlc-tagchips-l { font-size: 13px; font-weight: 600; margin-right: 2px; }
#kwl-charter-app .kwlc-tagchip { border-color: var(--kwlc-tag); }
#kwl-charter-app .kwlc-tagchip.kwl-on { background: var(--kwlc-tag); border-color: var(--kwlc-tag); color: #fff; }
.kwlc-tagpick { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; }
.kwlc-tagpick legend { float: left; font-size: 13px; font-weight: 600; margin-right: 10px; padding: 0; }
.kwlc-tagopt { display: inline-flex; align-items: center; gap: 5px; font-size: .85em; padding: 2px 10px 2px 6px; border-radius: 999px; border: 1px solid var(--kwlc-tag); cursor: pointer; }
.kwlc-tagopt input { margin: 0; width: auto; min-height: 0; height: auto; }
.kwlc-filterbox { margin: 0 0 4px; }

/* Voters, edit and delete */
.kwlc-voters { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 .6rem; font-size: .8em; opacity: .85; }
.kwlc-voters > span { display: inline-flex; gap: 5px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.kwlc-voters-up .kwl-ico { color: var(--kwlc-done); } .kwlc-voters-down .kwl-ico { color: var(--kwlc-rejected); }
.kwlc-voters .kwl-ico { width: 13px; height: 13px; flex: none; }
.kwlc-edited { font-size: .85em; font-style: italic; opacity: .7; }
.kwlc-rowacts { display: inline-flex; gap: 4px; margin-left: auto; }
.kwlc-meta .kwlc-rowacts { margin-left: auto; }
.kwlc-reply > .kwlc-meta { width: 100%; }
.kwl .kwl-btn.kwlc-mini { width: 28px; height: 28px; min-height: 28px; }
.kwlc-editinline textarea { width: 100%; max-width: 100%; min-height: 5rem; resize: vertical; padding: .65rem .75rem; margin: 0; border-radius: var(--kwl-radius); }
.kwlc-editinline .kwl-btn .kwl-ico { margin-right: 6px; }
.kwlc-editinline .kwl-row { margin-top: .5rem; }
.kwlc-thread.kwlc-deleted { opacity: .75; border-style: dashed; }
.kwlc-delnote { display: flex; gap: 6px; align-items: center; margin: .5rem 0 0; font-size: .85em; color: var(--kwlc-rejected); }
.kwlc-delnote .kwl-ico { width: 14px; height: 14px; }

/* Public text behaves like a normal page: responsive images, captions, alignment, galleries, embeds */
#kwlc-public-text img, #kwlc-public-text video, #kwlc-public-text iframe, #kwlc-public-text embed { max-width: 100%; height: auto; }
#kwlc-public-text iframe { aspect-ratio: 16 / 9; width: 100%; border: 0; }
#kwlc-public-text figure, #kwlc-public-text .wp-caption { max-width: 100%; margin: 1rem 0; }
#kwlc-public-text figcaption, #kwlc-public-text .wp-caption-text { font-size: .85em; opacity: .75; margin-top: .35rem; }
#kwlc-public-text .aligncenter { display: block; margin-inline: auto; }
#kwlc-public-text .alignleft { float: left; margin: .25rem 1rem .5rem 0; max-width: 50%; }
#kwlc-public-text .alignright { float: right; margin: .25rem 0 .5rem 1rem; max-width: 50%; }
#kwlc-public-text::after { content: ""; display: block; clear: both; }
#kwlc-public-text .gallery { display: flex; flex-wrap: wrap; gap: 8px; }
#kwlc-public-text .gallery-item { flex: 1 1 30%; margin: 0; }
#kwlc-public-text table { width: 100%; display: block; overflow-x: auto; }
@media (max-width: 600px) { #kwlc-public-text .alignleft, #kwlc-public-text .alignright { float: none; margin: 1rem auto; display: block; max-width: 100%; } }

/* Front-end public text editor */
#kwl-charter-app .kwlc-textedit { max-width: none; }
#kwl-charter-app .kwlc-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
#kwl-charter-app .kwlc-textedit textarea { width: 100%; font-family: Consolas, Menlo, monospace; font-size: 14px; line-height: 1.5; padding: 10px 12px; border-radius: var(--kwl-radius); }

/* Versions of the public text */
#kwl-charter-app .kwlc-versions { max-width: none; }
#kwl-charter-app .kwlc-vhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#kwl-charter-app .kwlc-vhead h3 { margin: 0; }
#kwl-charter-app .kwlc-vpick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
#kwl-charter-app .kwlc-vlist { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; max-height: 340px; overflow: auto; }
#kwl-charter-app .kwlc-vrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--kwl-line); border-radius: 8px; }
#kwl-charter-app .kwlc-vcur { border-color: var(--kwl-accent); background: color-mix(in srgb, var(--kwl-accent) 6%, transparent); }
#kwl-charter-app .kwlc-vinfo { display: flex; flex-direction: column; min-width: 0; }
#kwl-charter-app .kwlc-vmeta { font-size: .82em; opacity: .75; }
#kwl-charter-app .kwlc-vacts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#kwl-charter-app .kwlc-vview { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--kwl-line); }
#kwl-charter-app .kwlc-vbody { max-height: 420px; overflow: auto; padding: 10px 12px; border: 1px solid var(--kwl-line); border-radius: 8px; }
#kwl-charter-app .kwlc-vbody img { max-width: 100%; height: auto; }
#kwl-charter-app .kwlc-diff { max-height: 460px; overflow: auto; padding: 10px 12px; border: 1px solid var(--kwl-line); border-radius: 8px; }
#kwl-charter-app .kwlc-diff p { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
#kwl-charter-app .kwlc-same { opacity: .75; }
#kwl-charter-app ins.kwlc-ins { background: #d1f5d8; color: #0b5d1e; text-decoration: none; padding: 0 2px; border-radius: 3px; }
#kwl-charter-app del.kwlc-del { background: #fddcd8; color: #8a1c10; padding: 0 2px; border-radius: 3px; }
#kwl-charter-app .kwlc-legend { margin: 0 0 8px; font-size: .85em; }

/* Kingshot Calendar Palette Styling & Tidying for Editor Sections */
#kwl-charter-app .kwlc-composer,
#kwl-charter-app .kwlc-textedit,
#kwl-charter-app .kwlc-versions {
  background: var(--kwl-field-bg, #ffffff);
  border: 1px solid var(--kwl-line, #d5dbe7);
  border-left: 5px solid #f59e0b;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  margin-bottom: 18px;
}
#kwl-charter-app .kwlc-chip-pending.kwl-on { background: #f59e0b; border-color: #f59e0b; color: #fff; }
#kwl-charter-app .kwlc-chip-done.kwl-on { background: #10b981; border-color: #10b981; color: #fff; }
#kwl-charter-app .kwlc-chip-rejected.kwl-on { background: #f43f5e; border-color: #f43f5e; color: #fff; }
.kwlc-thread { border-left-color: #f59e0b; border-radius: 12px; }
.kwlc-thread.kwlc-t-done { border-left-color: #10b981; }
.kwlc-thread.kwlc-t-rejected { border-left-color: #f43f5e; }

/* Charter explicit calendar colors and alignment */
#kwl-charter-app .kwlc-chips { gap: 10px; margin-bottom: 16px; }
#kwl-charter-app .kwlc-chips .kwl-chip { height: 36px; }
#kwl-charter-app .kwlc-tagchip { border-radius: 999px !important; height: 32px; padding: 0 14px; font-weight: 600; }
#kwl-charter-app .kwl-actions { gap: 10px; }
#kwl-charter-app .kwl-actions .kwl-btn { height: 38px; min-height: 38px; padding: 0 18px; font-weight: 600; }

/* SOLID COLORS FOR CHARTER CHIPS AND UI */
#kwl-charter-app .kwlc-chip-pending.kwl-on { background: #f59e0b !important; border-color: #f59e0b !important; color: #fff !important; }
#kwl-charter-app .kwlc-chip-done.kwl-on { background: #10b981 !important; border-color: #10b981 !important; color: #fff !important; }
#kwl-charter-app .kwlc-chip-rejected.kwl-on { background: #f43f5e !important; border-color: #f43f5e !important; color: #fff !important; }
#kwl-charter-app .kwlc-thread.kwlc-t-pending { border-left-color: #f59e0b !important; }
#kwl-charter-app .kwlc-thread.kwlc-t-done { border-left-color: #10b981 !important; }
#kwl-charter-app .kwlc-thread.kwlc-t-rejected { border-left-color: #f43f5e !important; }
#kwl-charter-app .kwlc-status.kwlc-pending { color: #f59e0b !important; border-color: #f59e0b !important; background: rgba(245, 158, 11, 0.15) !important; }
#kwl-charter-app .kwlc-status.kwlc-done { color: #10b981 !important; border-color: #10b981 !important; background: rgba(16, 185, 129, 0.15) !important; }
#kwl-charter-app .kwlc-status.kwlc-rejected { color: #f43f5e !important; border-color: #f43f5e !important; background: rgba(244, 63, 94, 0.15) !important; }
#kwl-charter-app .kwl-btn.kwl-primary, #kwl-charter-app .kwlc-decision-l { color: #3b82f6 !important; }
#kwl-charter-app .kwl-btn.kwl-primary { background: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; }

/* Horizontal scrolling for tags and chips on mobile */
@media (max-width: 760px) {
  #kwl-charter-app .kwlc-tagchips, .kwlc-tagpick {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    width: 100%;
  }
  #kwl-charter-app .kwlc-tagchip, .kwlc-tagopt {
    flex: 0 0 auto;
  }
}

/* Advanced Filters & Tags for Charter */
#kwl-charter-app .kwlc-tagchip {
    background: color-mix(in srgb, var(--kwlc-tag, var(--kwl-line)) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--kwlc-tag, var(--kwl-line)) 40%, transparent) !important;
}
#kwl-charter-app .kwlc-tagchip.kwl-on {
    background: var(--kwlc-tag, var(--kwl-accent)) !important;
    border-color: var(--kwlc-tag, var(--kwl-accent)) !important;
    color: #fff !important;
}
#kwl-charter-app .kwlc-sort select { margin-left: 6px; }

/* Force perfect alignment and size for the refresh button */
#kwl-charter-app .kwlc-refresh { height: 36px !important; min-height: 36px !important; width: 36px !important; padding: 0 !important; }
#kwl-charter-app .kwlc-chips { align-items: center; }