/* C42 story composer: WYSIWYG (the page looks like the reader; the only extras are the + gaps, caption/credit lines and the docked size bar). */
.u-app[data-u=x-article-new] .u-chead{background:var(--c42-paper);border-bottom:1px solid var(--c42-hair);color:var(--c42-ink)}
.u-app[data-u=x-article-new] .u-chead .ttl{font:600 16.5px/1 var(--fb);color:var(--c42-ink)}
.u-app[data-u=x-article-new] .ar-switch{background:var(--c42-tint);margin:10px 24px 0}
.u-app[data-u=x-article-new] .ar-switch button{font-family:var(--fb);color:var(--c42-ink2)}
.u-app[data-u=x-article-new] .ar-switch button[aria-selected=true]{background:var(--c42-paper);color:var(--c42-ink)}
.u-app[data-u=x-article-new] .ar-ed{padding:0 0 calc(120px + env(safe-area-inset-bottom,0px))}
.c42c{font-family:var(--fb);color:var(--c42-ink)}
.c42c textarea,.c42c input{font-family:inherit}
.c42c-as{display:flex;align-items:center;gap:8px;padding:16px var(--pad) 0;font:500 .8125rem/1.2 var(--fb);color:var(--c42-ink2)}
.c42c-as .u-face,.c42c-as img{width:22px!important;height:22px!important;border-radius:50%;object-fit:cover;flex:none;font-size:9px!important}
.c42c-sec{display:block;width:calc(100% - 2 * var(--pad));margin:18px var(--pad) 0;border:0;outline:0;background:none;padding:0;font:700 .75rem/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--c42-ink);border-radius:0}
.c42c-sec::placeholder{color:var(--c42-ink3);letter-spacing:.14em}
.u-app[data-u=x-article-new] .ar-ed textarea.ar-ti,.u-app[data-u=x-article-new] .ar-ed textarea.ar-de{display:block;width:100%;border:0!important;outline:0;background:none!important;resize:none;border-radius:0;overflow:hidden;box-shadow:none}
.u-app[data-u=x-article-new] .ar-ed textarea.ar-ti{color:var(--c42-ink);font-family:var(--fd);font-weight:860;font-variation-settings:"opsz" 144,"SOFT" 0;font-size:calc(1.9375rem / var(--c42-ts) * (1 + (var(--c42-ts) - 1) * .5));line-height:1.06;letter-spacing:-.022em;padding:.7rem var(--pad) 0;min-height:0}
.u-app[data-u=x-article-new] .ar-ed textarea.ar-de{color:var(--c42-ink2);font:400 1.125rem/1.42 var(--fb);padding:.8rem var(--pad) 0}
.u-app[data-u=x-article-new] .ar-ti::placeholder,.u-app[data-u=x-article-new] .ar-de::placeholder{color:var(--c42-ink3)}
.c42c .ar-cnt{display:none;text-align:right;padding:0 var(--pad);font:400 .75rem/1rem var(--fb);color:var(--c42-ink3)}
.c42c .ar-cnt.near{display:block}
.c42c-hair{height:1px;background:var(--c42-hair);margin:1.25rem var(--pad) 0}
.c42c-body{padding:.25rem var(--pad) 0;position:relative}
.c42c-body.c42-body{padding-top:.25rem}
.c42c-p{outline:0;min-height:1.56em;margin:0;white-space:pre-wrap;word-break:break-word;caret-color:var(--coral);-webkit-user-select:text;user-select:text}
.c42c-p:empty::before{content:attr(data-ph);color:var(--c42-ink3);pointer-events:none}
.c42-wrapf .c42c-p{hyphens:auto;-webkit-hyphens:auto}
.c42c .c42-fig{margin:.5rem 0}
.c42c .c42-fig.full,.c42c .c42-fig.vid,.c42c .c42-fig.gal{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
.c42c .c42-fig.sel .tap img,.c42c .c42-fig.sel .c42-vf,.c42c .c42-fig.sel .c42-mos{outline:2px solid var(--coral);outline-offset:-2px}
.c42c .c42-fig.inset.sel .tap img{outline-offset:2px}
.c42c-cv{position:absolute;left:12px;top:12px;z-index:2;height:26px;padding:0 10px;border-radius:13px;background:rgba(18,16,14,.55);color:#fff;font:600 12px/26px var(--fb);letter-spacing:.02em;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.c42-fig.inset .c42c-cv{left:6px;top:6px;height:22px;line-height:22px;font-size:11px;padding:0 8px}
.c42c .capin,.c42c .crin{display:block;width:100%;border:0!important;outline:0;background:none!important;padding:0;color:var(--c42-ink);resize:none;overflow:hidden;font-family:var(--fb);border-radius:0;box-shadow:none}
.c42c .capin{font:400 .875rem/1.4 var(--fb);margin-top:.625rem;min-height:0}
.c42c .crin{font:400 .75rem/1.35 var(--fb);color:var(--c42-ink2);margin-top:.25rem;min-height:0}
.c42c .capin::placeholder,.c42c .crin::placeholder{color:var(--c42-ink3)}
.c42c .c42-fig.inset .capin{font-size:.78125rem;margin-top:.55rem}.c42c .c42-fig.inset .crin{font-size:.6875rem}
.c42c .cfoot{padding:0 var(--pad)}.c42c .c42-fig.inset .cfoot{padding:0}
.c42c .c42-fig .tap{cursor:pointer}
.c42c .c42-vf .tap{position:absolute;inset:0}
.c42c .c42-mos span{position:relative;overflow:hidden;background:var(--c42-tint);display:block}
.c42c .c42-mos:not(.two) span:first-child{grid-row:1/3}
.c42c .c42-mos img{width:100%;height:100%;object-fit:cover}
.c42c .c42-pq{margin:.9rem 0}.c42c .c42-pq.sel{outline:2px solid var(--coral);outline-offset:6px;border-radius:2px}
.c42c .c42-pq q{outline:0;min-height:1.22em;white-space:pre-wrap}.c42c .c42-pq cite{outline:0;min-height:1.3em;display:block}
.c42c .c42-pq q:empty::before,.c42c .c42-pq cite:empty::before{color:var(--c42-ink3)}
.c42c .c42-pq q:empty::before{content:attr(data-ph)}.c42c .c42-pq cite:empty::before{content:attr(data-ph)}
.c42c .c42-pq cite:not(:empty)::before{content:"\2014\00a0"}
.c42c .c42-link{margin:.5rem 0}
/* the + gap: quiet by default (exactly one paragraph of rhythm); the + shows only where the writer's cursor is, and at the end */
.c42c-gap{position:relative;display:flex;align-items:center;gap:12px;height:1.15rem;margin:0;clear:both}
.c42c-gap .plus,.c42c-gap::after{visibility:hidden}
.c42c-gap::after{content:"";flex:1;height:1px;background:var(--c42-hair)}
.c42c-gap.act,.c42c-gap.open{height:2.75rem}
.c42c-gap.act .plus,.c42c-gap.act::after,.c42c-gap.open .plus,.c42c-gap.open::after{visibility:visible}
.c42c-gap .plus{width:28px;height:28px;border-radius:50%;border:1px solid var(--c42-ink3);display:grid;place-items:center;color:var(--c42-ink2);background:var(--c42-paper);flex:none;position:relative;padding:0}
.c42c-gap .plus::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.c42c-gap .plus svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transition:transform .2s}
.c42c-gap .plus[disabled]{opacity:.4}
.c42c-gap.open .plus{border-color:var(--c42-ink);color:var(--c42-ink)}
.c42c-gap.open .plus svg{transform:rotate(45deg)}
.c42c-tray{display:none;clear:both;margin:.1rem 0 .6rem;border-radius:16px;background:var(--c42-tint);padding:6px;grid-template-columns:repeat(4,1fr);gap:2px}
.c42c-tray.on{display:grid}
.c42c-tray button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 2px 12px;border-radius:12px;font:600 .8125rem/1 var(--fb);color:var(--c42-ink);text-align:center;background:none;border:0;cursor:pointer;min-height:44px}
.c42c-tray button small{display:block;font:400 .6875rem/1.25rem var(--fb);line-height:1.25;color:var(--c42-ink3);margin-top:-1px}
.c42c-tray button:active{background:var(--c42-hair)}
.c42c-tray svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.c42c-tray .qg{font:600 34px/26px var(--fd);height:26px;display:block;color:var(--c42-ink);font-variation-settings:"opsz" 72}
.c42c-nudge{margin:18px var(--pad) 0}
.c42c-meta{display:flex;gap:14px;flex-wrap:wrap;padding:0 var(--pad);margin:18px 0 0;font:400 .8125rem/1.125rem var(--fb);color:var(--c42-ink3)}
.u-app[data-u=x-article-new] .ar-go{padding:0 var(--pad);margin-top:18px}
.u-app[data-u=x-article-new] .ar-warn{padding:0 var(--pad)}
.u-app[data-u=x-article-new] .ar-nudge{margin:18px var(--pad) 0}
/* toast */
.c42c-toast{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--c42-ink);color:var(--c42-paper);border-radius:22px;height:44px;display:none;align-items:center;gap:14px;padding:0 8px 0 18px;font:500 .875rem/1 var(--fb);z-index:20;white-space:nowrap;max-width:calc(100% - 24px)}
.c42c-toast.on{display:flex}
.c42c-toast button{height:44px;padding:0 12px;border-radius:22px;font:600 .875rem/1 var(--fb);color:var(--c42-undo);background:none;border:0;cursor:pointer}
/* docked bar: a flex row between the page and the tab bar, so it never covers the field being typed in */
.c42c-dock{flex:none;background:var(--c42-paper);border-top:1px solid var(--c42-hair);padding:12px var(--pad) 12px;display:none;font-family:var(--fb);position:relative;z-index:6}
.c42c-dock.on{display:block}
.c42c-drow{display:flex;align-items:center;gap:6px}
.c42c-seg{display:flex;background:var(--c42-tint);border-radius:12px;padding:3px;gap:2px}
.c42c-seg button{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 11px;border-radius:9px;font:500 .875rem/1 var(--fb);color:var(--c42-ink2);background:none;border:0;cursor:pointer;position:relative}
.c42c-seg button::before{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-3px}
.c42c-seg button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.c42c-seg button.on{background:var(--c42-paper);color:var(--c42-ink);box-shadow:0 1px 2px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.06)}
html[data-theme=dark] .c42c-seg button.on{background:#2a2e2b}
.c42c-dock .sp{flex:1}
.c42c-dock .tb{height:44px;padding:0 10px;font:500 .875rem/1 var(--fb);color:var(--c42-ink);border-radius:10px;display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer}
.c42c-dock .tb svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.c42c-dnote{display:flex;align-items:center;gap:7px;margin-top:6px;font:400 .75rem/1.3 var(--fb);color:var(--c42-ink2)}
.c42c-dnote svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.c42c-dnote .lnk{margin-left:auto;min-height:44px;padding:0 4px;font:600 .8125rem/1 var(--fb);color:var(--c42-ink);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.c42c-dhint{font:400 .8125rem/1.35 var(--fb);color:var(--c42-ink2);flex:1}
.c42c-guard{margin-top:6px;font:500 .8125rem/1.3 var(--fb);color:var(--c42-ink)}
/* beat the older article composer rules (article.css) inside the new body */
.u-app[data-u=x-article-new] .ar-ed input.ar-k.c42c-sec{border:0!important;background:none!important;padding:0!important;width:calc(100% - 2 * var(--pad));margin:18px var(--pad) 0;border-radius:0;box-shadow:none;min-height:0;height:auto;font:700 .75rem/1.2 var(--fb)}
.u-app[data-u=x-article-new] .ar-ed .c42c-p{font:inherit;letter-spacing:inherit;font-variation-settings:inherit;min-height:1.56em;padding:0;border:0;background:none;border-radius:0;color:var(--c42-ink);box-shadow:none}
.u-app[data-u=x-article-new] .ar-ed .c42c-p:focus,.c42c-body [contenteditable]:focus{outline:0}
.u-app[data-u=x-article-new] .ar-ed .c42c-p+.c42c-gap{margin-top:0}
.c42c-body>.c42c-p+.c42c-gap:not(.act):not(.open){margin-top:0}

/* ===== STORY S4 progressive (Nov 5 2026) ===== */
.c42c.s4 { padding-bottom: 88px; }
.s4-pin { display: flex; align-items: center; justify-content: flex-start; padding: 4px var(--pad, 24px) 0; }
.c42c-as.s4-as { min-height: 36px; padding: 0; gap: 6px; font: 500 13px/1 var(--fb); color: var(--c42-ink); width: auto; }
.s4-as-mut { color: var(--c42-ink3); font-weight: 500; }
.s4-as .u-face, .s4-as img { width: 22px !important; height: 22px !important; }
.s4-cover.pf-live { width: calc(100% - 2 * var(--pad, 24px)); margin: 8px var(--pad, 24px) 0; height: auto; aspect-ratio: 1 / 1; max-height: 340px; border-radius: 14px; padding: 0; position: relative; overflow: hidden; background-size: cover; background-position: center; border: 0; display: block; }
.s4-cover:not(.has) { background: var(--c42-tint); border: 1.5px dashed var(--c42-ink3); display: grid; place-items: center; }
.s4-cov-chip { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.5); color: #fff; font: 600 12px/1 var(--fb); }
.s4-cover:not(.has) .s4-cov-chip { position: static; background: none; color: var(--c42-ink); }
.s4-cover:not(.has) .s4-cov-meta { display: none; }
.s4-cov-meta { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; color: #fff; text-align: left; }
.s4-cov-meta small { display: block; font: 650 10px/1 var(--fb); letter-spacing: 1.2px; }
.s4-cov-meta .pf-lv-t { display: block; font: 650 22px/1.08 var(--fb); margin: 7px 0 6px; -webkit-line-clamp: 2; }
.s4-cov-meta .pf-lv-d { display: block; font: 400 11px/1.3 var(--fb); opacity: .92; }
.s4-cover.has::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0002 10%, #0000 35%, #000c 100%); pointer-events: none; }
.s4-flab { font: 500 11px/1 var(--fb); color: var(--c42-ink3); letter-spacing: .3px; margin: 12px var(--pad, 24px) 5px; }
.s4-kick { margin-top: 10px !important; }
.u-app[data-u=x-article-new] .ar-ed textarea.ar-ti.s4-title { font-size: 22px; font-weight: 600; padding-top: .2rem; }
.u-app[data-u=x-article-new] .ar-ed textarea.ar-de.s4-caption { font-size: 15px; color: var(--c42-ink2); padding-top: .4rem; }
.s4-body { padding-top: .5rem; }
.s4-block { position: relative; }
.s4-x { position: absolute; top: 8px; right: 8px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; background: rgba(14,16,15,.72); color: #f2ece1; border: 1px solid #ffffff22; display: grid; place-items: center; font: 500 14px/1 var(--fb); cursor: pointer; padding: 0; }
.s4-addwrap { position: relative; z-index: 5; background: linear-gradient(180deg, transparent, var(--c42-paper) 36%); padding: 6px 0 10px; margin: 4px 0; }
.s4-addwrap.at-end { position: sticky; bottom: 0; padding: 8px var(--pad, 24px) 12px; margin-top: 8px; margin-left: calc(var(--pad, 24px) * -1); margin-right: calc(var(--pad, 24px) * -1); padding-left: var(--pad, 24px); padding-right: var(--pad, 24px); }
/* when mid-story the wrap lives inside .s4-body which already has pad */
.s4-body > .s4-addwrap:not(.at-end) { margin-left: 0; margin-right: 0; }
.s4-addwrap.kb { position: fixed; left: 0; right: 0; background: var(--c42-paper); border-top: 1px solid var(--c42-hair); padding: 8px var(--pad, 24px); bottom: 0; }
.s4-addwrap.ghost { position: fixed; left: 0; right: 0; z-index: 40; margin: 0; padding: 8px var(--pad, 24px); background: color-mix(in srgb, var(--c42-paper) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: auto; box-shadow: 0 8px 24px #0006; }
.s4-addwrap.dragging .s4-addline { cursor: grabbing; }
.s4-addline { display: flex; align-items: center; gap: 6px; min-height: 40px; touch-action: none; }
.s4-addline.left { justify-content: flex-start; }
.s4-addline.center { justify-content: center; }
.s4-addline.right { justify-content: flex-end; }
.s4-addline .rule { flex: 1; height: 1px; background: var(--c42-hair); max-width: 40px; }
.s4-addline.center .rule { max-width: 56px; }
.s4-grip { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--c42-ink3); font: 700 16px/1 var(--fb); letter-spacing: -1px; background: var(--c42-tint); border: 1px solid var(--c42-hair); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.s4-grip:active, .s4-addwrap.dragging .s4-grip { cursor: grabbing; color: var(--coral, #D93350); border-color: color-mix(in srgb, var(--coral, #D93350) 50%, transparent); }
.s4-step { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 0; background: var(--c42-tint); color: var(--c42-ink2); font: 700 12px/1 var(--fb); cursor: pointer; padding: 0; }
.s4-step:active { color: var(--coral, #D93350); }
.s4-addbtn { border: 1px dashed color-mix(in srgb, var(--c42-ink) 28%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--c42-tint) 80%, transparent); color: var(--c42-ink); font: 600 13px/1 var(--fb); padding: 8px 14px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-height: 36px; touch-action: manipulation; }
.s4-addbtn span { color: var(--coral, #D93350); font-size: 15px; font-weight: 700; }
.s4-alignpills { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.s4-alignpills[hidden] { display: none !important; }
.s4-alignpills button { width: 28px; height: 22px; border-radius: 6px; border: 0; background: var(--c42-tint); color: var(--c42-ink3); font: 600 10px/1 var(--fb); cursor: pointer; }
.s4-alignpills button[aria-pressed=true] { background: var(--coral, #D93350); color: #fff; }
.s4-menu { position: fixed; inset: 0; z-index: 30; }
.s4-menu[hidden] { display: none !important; pointer-events: none !important; }
.s4-scrim { position: absolute; inset: 0; background: rgba(6,8,7,.55); }
.s4-pop { position: absolute; left: 28px; right: 28px; top: 42%; transform: translateY(-50%); background: var(--c42-paper); border: 1px solid var(--c42-hair); border-radius: 16px; padding: 10px; box-shadow: 0 18px 40px #0008; }
.s4-pop h3 { font: 600 13px/1 var(--fb); color: var(--c42-ink3); padding: 8px 10px 6px; margin: 0; }
.s4-opt { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 10px; width: 100%; border: 0; background: none; text-align: left; color: var(--c42-ink); cursor: pointer; font: inherit; }
.s4-opt:active, .s4-opt:focus-visible { background: var(--c42-tint); }
.s4-opt .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--c42-tint); display: grid; place-items: center; font-size: 16px; color: var(--c42-ink); flex: none; }
.s4-opt b { display: block; font: 600 15px/1.2 var(--fb); }
.s4-opt small { display: block; font: 400 12px/1.3 var(--fb); color: var(--c42-ink3); margin-top: 2px; }
.s4-slot { height: 3px; margin: 2px 0; border-radius: 2px; background: color-mix(in srgb, var(--coral, #D93350) 22%, transparent); transition: height .1s, background .1s, margin .1s; pointer-events: none; }
.s4-slot.on { height: 4px; margin: 10px 0; background: var(--coral, #D93350); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral, #D93350) 28%, transparent); }
.u-app[data-u=x-article-new] .ar-ed { padding-bottom: calc(40px + env(safe-area-inset-bottom,0px)); }
.pf-tools.s4-tools-hidden { display: none !important; }
/* denser: hide legacy sticky pin banner styles when S4 cover is present */
.c42c.s4 .pf-pin { display: none; }
.c42c.s4 .c42c-hair { display: none; }

/* AL1: landing cue after ▴/▾ or a drop — brief coral pulse on the rules and the Add pill */
.s4-addline .rule, .s4-addbtn { transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.s4-addline.s4-land .rule { background: var(--coral, #D93350); }
.s4-addline.s4-land .s4-addbtn { border-color: var(--coral, #D93350); border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral, #D93350) 22%, transparent); }
@media (prefers-reduced-motion: reduce) { .s4-addline .rule, .s4-addbtn { transition: none; } }
.s4-noanchor, .s4-noanchor * { overflow-anchor: none !important; }