/* =========================================================================
 * LL Comments v1 — one comments-and-hearts module, three surfaces.
 * The DOM never changes between hosts; a host sets --llc-accent and a
 * container treatment. Events cards, broadsheet update cards, and the
 * showcase watch overlay (dark skin).  Fonts arrive with each board.
 * ========================================================================= */
.llc{--llc-accent:#0E9F8B;--llc-on:#fff;border-top:1px solid #E4E9F2;font-family:'DM Sans',sans-serif;text-align:left}
.llbu-card .llc{--llc-accent:#8A5E10;border-top-color:#E7E0D0;margin:0 -22px -1px}
#llscOverlay .llc{--llc-accent:#E8B84B;--llc-on:rgba(16,26,52,.92);border:0;border-radius:12px;background:rgba(10,21,48,.82);color:#fff;margin-top:12px}

.llc-bar{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;min-height:52px;background:none;border:0;text-align:left;cursor:pointer;font-family:inherit;border-radius:inherit}
.llc-faces{display:flex;flex:none}
.llc-face{width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:var(--llc-accent);color:#fff;font-family:'Outfit',sans-serif;font-size:9.5px;font-weight:700;font-style:normal;display:grid;place-items:center;margin-left:-7px}
#llscOverlay .llc-face{color:#101A34;border-color:rgba(10,21,48,.9)}
.llc-face:first-child{margin-left:0}
.llc-count{font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;color:#0E1B3D;flex:none}
#llscOverlay .llc-count{color:#fff}
.llc-hearts{font-weight:600;color:#8896AF}
#llscOverlay .llc-hearts{color:rgba(255,255,255,.65)}
.llc-tease{flex:1;min-width:0;font-size:12.5px;color:#5B6B87;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#llscOverlay .llc-tease{color:rgba(255,255,255,.75)}
.llc-tease b{font-weight:600;color:#20304F}
#llscOverlay .llc-tease b{color:#fff}
/* the invitation is the only thing on an empty strip, so it carries the
   strip: bigger, in the serif the rest of the site uses for its voice,
   with a small accent mark and a slow shimmer that never shouts. */
.llc-tease-empty{font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:15.5px;line-height:1.35;letter-spacing:.005em;color:#7C89A2;
  display:flex;align-items:center;gap:9px;overflow:visible}
.llc-tease-empty::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--llc-accent);box-shadow:0 0 0 4px rgba(14,159,139,.14);
  animation:llc-breathe 3.6s ease-in-out infinite}
.llc:hover .llc-tease-empty,.llc:focus-within .llc-tease-empty{color:#54627D}
#llscOverlay .llc-tease-empty{color:#F2E6C8;text-shadow:0 0 22px rgba(232,184,75,.28)}
#llscOverlay .llc-tease-empty::before{box-shadow:0 0 0 4px rgba(232,184,75,.18)}
#llscOverlay .llc:hover .llc-tease-empty{color:#FFF6E2}
.llbu-card .llc-tease-empty::before{box-shadow:0 0 0 4px rgba(138,94,16,.14)}
@keyframes llc-breathe{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.llc-tease-empty::before{animation:none;opacity:.9}}
.llc-caret{flex:none;width:16px;height:16px;color:#8896AF;transition:transform .2s}
.llc.is-open .llc-caret{transform:rotate(180deg)}
.llc-bar:focus-visible{outline:2px solid var(--llc-accent);outline-offset:-2px;border-radius:10px}

.llc-drawer{max-height:0;overflow:hidden;transition:max-height .28s ease}
.llc:hover .llc-drawer,.llc:focus-within .llc-drawer{max-height:236px}
.llc.is-open .llc-drawer{max-height:560px;overflow-y:auto}
@media (hover:none){.llc:hover .llc-drawer{max-height:0}.llc.is-open .llc-drawer{max-height:560px}}
.llc-list{list-style:none;margin:0;padding:2px 16px 6px}
.llc-item{display:flex;gap:10px;padding:9px 0;border-top:1px solid rgba(136,150,175,.14)}
.llc-item:first-child{border-top:0}
.llc-item.llc-more-hidden{display:none}
.llc.is-open .llc-item.llc-more-hidden{display:flex}
.llc-item .llc-face{flex:none;margin:1px 0 0;border-width:0;width:28px;height:28px;font-size:10.5px}
.llc-body{flex:1;min-width:0}
.llc-who{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.llc-who b{font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:700;color:#0E1B3D}
#llscOverlay .llc-who b{color:#fff}
.llc-when{font-size:10.5px;color:#8896AF}
.llc-text{margin:3px 0 0;font-size:13px;line-height:1.55;color:#20304F;overflow-wrap:anywhere}
#llscOverlay .llc-text{color:rgba(255,255,255,.86)}
.llc-like{flex:none;display:inline-flex;align-items:center;gap:5px;align-self:flex-start;background:none;border:1.5px solid transparent;border-radius:999px;padding:4px 9px;font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;color:#8896AF;cursor:pointer;transition:all .15s}
.llc-like svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.llc-like:not([disabled]):hover{color:#C2485E;border-color:rgba(194,72,94,.3)}
.llc-like[aria-pressed="true"]{color:#C2485E}
.llc-like[aria-pressed="true"] svg{fill:#C2485E;stroke:#C2485E}
.llc-like[disabled]{cursor:default;opacity:.6}
.llc-del{flex:none;align-self:flex-start;width:24px;height:24px;border-radius:50%;border:1px solid transparent;background:none;color:#8896AF;font-size:11px;cursor:pointer;opacity:0;transition:all .15s}
.llc-item:hover .llc-del,.llc-del:focus-visible{opacity:1}
.llc-del:hover{color:#B3261E;border-color:rgba(179,38,30,.3)}
.llc-more{display:none;width:calc(100% - 32px);margin:2px 16px 10px;padding:8px;border:1.5px dashed rgba(136,150,175,.35);border-radius:9px;background:none;font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:700;color:#5B6B87;cursor:pointer}
.llc.is-open .llc-more{display:block}
.llc.is-open .llc-more[hidden]{display:none}
.llc-more:hover{border-color:var(--llc-accent);color:var(--llc-accent)}

.llc-compose{display:none;gap:10px;padding:10px 16px 14px;border-top:1px solid rgba(136,150,175,.16);align-items:center}
.llc.is-open .llc-compose{display:flex}
.llc-compose .llc-face{flex:none;border-width:0;width:28px;height:28px;font-size:10.5px}
.llc-in{flex:1;border:1.5px solid #E4E9F2;border-radius:999px;padding:8px 15px;font-family:'DM Sans',sans-serif;font-size:13px;background:#fff;color:#20304F;min-width:0}
#llscOverlay .llc-in{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
.llc-in:focus{outline:none;border-color:var(--llc-accent)}
.llc-send{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--llc-accent);color:var(--llc-on,#fff);cursor:pointer;display:grid;place-items:center}
.llc-send svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.llc-send:not([disabled]):hover{filter:brightness(1.08)}
.llc-signin{justify-content:center;font-size:12.5px}
.llc-signin a{color:var(--llc-accent);font-weight:600;text-decoration:none}
.llc-signin a:hover{text-decoration:underline}

.llc-owner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;border-top:1px solid rgba(136,150,175,.16)}
.llc-owner-lab{font-family:'Outfit',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5B6B87}
#llscOverlay .llc-owner-lab{color:rgba(255,255,255,.7)}
.llc-switch{position:relative;flex:none;width:40px;height:22px;border-radius:99px;border:0;background:#C6CFDD;cursor:pointer;transition:background .2s}
.llc-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.llc-switch[aria-checked="true"]{background:var(--llc-accent)}
.llc-switch[aria-checked="true"]::after{left:21px}
.llc-switch[disabled]{opacity:.6;cursor:default}
.llc.is-off .llc-owner{border-top:0}
.llc-offnote{padding:0 16px 12px;margin:0;font-size:12.5px;color:#8896AF}
@media(prefers-reduced-motion:reduce){.llc-drawer,.llc-caret,.llc-switch::after{transition:none}}