/* Majlis Talks comments, inline: the box sits straight under the sign-off, in the same column as the closing paragraph.
   Colours come from the Day/Night variables (night.css), with day fallbacks. No pure black (#111111 is the darkest). */

/* the last text block and the comment box share the text block's place in the spread (.m-end wraps both) */
.b-s5>.m-end{grid-column:7/13;grid-row:1/3;min-width:0}
.b-s4>.m-end{grid-column:1/11;min-width:0}
.b-s4.has-side>.m-end{grid-column:3/13}
@media (max-width:1100px){.b-s5>.m-end{grid-column:1/13;grid-row:3}.b-s4>.m-end,.b-s4.has-side>.m-end{grid-column:1/13}}
@media (max-width:760px){.b-s5>.m-end{order:1}}

.cm{--serif:"Source Serif 4","Iowan Old Style","Georgia",serif;--cg:clamp(1.1rem,1.8vw,1.75rem);--cm-fs:clamp(.9688rem,.98vw,1.0313rem);
  margin-top:var(--cm-top,1.5rem);color:var(--n-ink,#111111);font-family:var(--font);scroll-margin-top:30vh;min-width:0}
.cm[hidden]{display:none}
/* line up with the column the sign-off is in (the last of the text columns) */
@media (min-width:761px){
  .m-end>.m-cols.c2+.cm{margin-left:calc(50% + var(--cg)/2)}
  .m-end>.m-cols.c3+.cm{margin-left:calc((100% + var(--cg))*2/3)}
}
@media (min-width:761px) and (max-width:1100px){.m-end>.m-cols.c3+.cm{margin-left:calc(50% + var(--cg)/2)}}

/* small label + count, on a hairline like the spread's top rule */
.cm-h{margin:0 0 .15rem;padding-top:.55rem;border-top:1px solid var(--n-ink,#111111);font-size:.625rem;line-height:1.2;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.cm-count{margin-left:.4em;font-weight:500;color:var(--n-grey,#8a8a86)}
.cm-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.cm-form{margin:0}
.cm-f{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.cm-f label{font-size:.625rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;line-height:1.3;color:var(--n-grey,#8a8a86)}
.cm-f label i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400}
.cm-f input,.cm-f textarea{font:inherit;font-weight:400;color:var(--n-ink,#111111);background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--n-ink,#111111) 35%,transparent);
  border-radius:0;padding:.4rem 0 .45rem;width:100%;outline:none;transition:border-color .25s;-webkit-appearance:none;appearance:none}
.cm-f input{font-size:.875rem}
.cm-f input:focus,.cm-f textarea:focus{border-bottom-color:var(--n-ink,#111111)}

/* the comment field: one line at rest, about four lines once you start */
.cm-area{position:relative}
.cm-f-body textarea{display:block;font-family:var(--serif);font-size:var(--cm-fs);line-height:1.5;height:calc(1.5em + .85rem);min-height:0;resize:none;overflow:hidden;
  transition:height .4s var(--ease-2,cubic-bezier(.2,.7,.2,1)),border-color .25s}
.cm-form.is-open .cm-f-body textarea{height:calc(6em + .85rem);overflow:auto}
/* the typed prompt sits where a placeholder would: one line, scrolling left as it types */
.cm-ghost{position:absolute;left:0;right:0;top:.4rem;display:block;white-space:nowrap;overflow:hidden;pointer-events:none;font-family:var(--serif);font-size:var(--cm-fs);line-height:1.5;font-style:italic;
  color:var(--n-grey,#8a8a86);opacity:0;transition:opacity .3s}
.cm-ghost.is-on{opacity:.9}
.cm-ghost.is-scrolled{-webkit-mask-image:linear-gradient(90deg,transparent,#000 1.5em);mask-image:linear-gradient(90deg,transparent,#000 1.5em)}
.cm-caret{display:inline-block;width:1px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:currentColor;animation:cm-blink 1.05s steps(1) infinite}
.cm-ghost.is-typing .cm-caret{animation:none}
@keyframes cm-blink{50%{opacity:0}}
.cm-left{font-size:.6875rem;color:var(--n-grey,#8a8a86);align-self:flex-end;min-height:0}
.cm-left:empty{display:none}
.cm-left.is-over{color:var(--n-ink,#111111);font-weight:500}

/* everything else slides open underneath */
.cm-more{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .45s var(--ease-2,cubic-bezier(.2,.7,.2,1)),opacity .3s ease,visibility 0s linear .45s}
.cm-form.is-open .cm-more{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .45s var(--ease-2,cubic-bezier(.2,.7,.2,1)),opacity .35s ease .08s,visibility 0s}
.cm-more-in{min-height:0;overflow:hidden}
.cm-row{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:1.1rem}
@container cm (min-width:380px){.cm-row{grid-template-columns:1fr 1fr;column-gap:1.2rem;align-items:end}}
.cm{container:cm/inline-size}
.cm-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.cm-check{display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;font-size:.75rem;color:var(--n-soft,#3d3d3a);user-select:none;-webkit-user-select:none;max-width:100%;cursor:pointer}
.cm-check input{position:absolute;opacity:0;width:1px;height:1px}
.cm-box{width:.9rem;height:.9rem;flex:none;border:1px solid var(--n-ink,#111111);border-radius:2px;transition:background .2s}
.cm-check input:checked+.cm-box{background:var(--n-ink,#111111);box-shadow:inset 0 0 0 2.5px var(--n-page,#fcfcfa)}
.cm-check input:focus-visible+.cm-box{outline:2px solid var(--n-ink,#111111);outline-offset:2px}
.cm-check.is-off{opacity:.45;cursor:default}
.cm-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:1.1rem;padding:0 0 .25rem}
.cm-send{display:inline-flex;align-items:center;padding:.85rem 1.15rem;border:0;border-radius:99px;font:500 .6875rem/1 var(--font);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;
  background:var(--n-ink,#111111);color:var(--n-page,#fcfcfa);transition:opacity .2s}
.cm-send:disabled{opacity:.5}
@media (hover:hover){.cm-send:not(:disabled):hover{opacity:.82}}
.cm-note{margin:0;font-size:.6875rem;color:var(--n-grey,#8a8a86)}
.cm-status{margin:.6rem 0 0;font-size:.75rem;color:var(--n-grey,#8a8a86)}
.cm-status:empty{display:none}
.cm-status.is-err{color:var(--n-ink,#111111)}
.cm-status.is-err::before{content:"— "}

/* the comments themselves, under the box */
.cm-list{list-style:none;margin:1.6rem 0 0;padding:0}
.cm-list:empty{display:none}
.cm-empty{display:none}
.cm-item{padding:1rem 0 1.1rem;border-top:1px solid color-mix(in srgb,var(--n-ink,#111111) 14%,transparent);scroll-margin:30vh}
.cm-meta{display:flex;flex-wrap:wrap;gap:.25rem .8rem;align-items:baseline;margin:0 0 .45rem;font-size:.625rem;letter-spacing:.09em;text-transform:uppercase}
.cm-name{font-weight:800;color:var(--n-ink,#111111);overflow-wrap:anywhere}
.cm-date,.cm-ed{font-weight:500;color:var(--n-grey,#8a8a86)}
.cm-text{font-family:var(--serif);font-size:var(--cm-fs);line-height:1.5;color:var(--n-ink,#111111);overflow-wrap:anywhere}
.cm-text p{margin:0}.cm-text p+p{text-indent:1.15em}
.cm-item.is-new .cm-name{box-shadow:inset 0 -.45em 0 color-mix(in srgb,var(--n-ink,#111111) 10%,transparent)}
.cm-replies{list-style:none;margin:.9rem 0 0;padding:0 0 0 1rem;border-left:1px solid color-mix(in srgb,var(--n-ink,#111111) 14%,transparent)}
.cm-replies:empty{display:none}
.cm-item.is-reply{border-top:0;padding:0 0 .9rem}
.cm-item.is-reply:last-child{padding-bottom:0}
.cm-reply{margin-top:.55rem;padding:0;border:0;background:none;color:var(--n-grey,#8a8a86);font:500 .625rem/1 var(--font);letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.cm-reply::after{content:" ↩";letter-spacing:0}
@media (hover:hover){.cm-reply:hover{color:var(--n-ink,#111111)}}
.cm-form.is-reply{margin-top:1rem;padding:.2rem 0 0 1rem;border-left:1px solid var(--n-ink,#111111)}
.cm-replying{margin:0 0 .3rem;font-size:.625rem;color:var(--n-grey,#8a8a86)}
.cm-replying-name{color:var(--n-ink,#111111);font-weight:700}
.cm-cancel{margin-left:.6rem;padding:0;border:0;background:none;color:var(--n-ink,#111111);font:500 .625rem/1 var(--font);letter-spacing:.09em;text-transform:uppercase;text-decoration:underline;text-underline-offset:.25em;cursor:pointer}

/* phone: one column, straight after the sign-off; 16px+ inputs so iOS doesn't zoom */
@media (max-width:760px){
  .cm{--cm-fs:1.0625rem}
  .cm-f input{font-size:1rem}
  .cm-send{padding:.95rem 1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .cm-more,.cm-form.is-open .cm-more,.cm-f-body textarea,.cm-ghost,.cm-f input{transition:none}
  .cm-caret{animation:none}
}