/* Extras of a long post (.iclPk, R77): the title's gradient, a quote, chapters under the player, the "now reading" bar. The post's text and its blocks are the guide pattern
   (icl-patterns.css), the player's row is icl-player.css. Loaded only on such a post (includes/post-kit.php). */
.iclPk{--pk-acc:#ff6528;--pk-acc-rgb:255,101,40;--pk-line:rgba(154,174,180,.2);--pk-muted:#a7b0b5;--pk-text:#f4f7f8;
  --pk-mono:var(--iclpv-fontMono,"IBM Plex Mono",monospace);--pk-disp:var(--iclpv-fontDisplay,"Space Grotesk",sans-serif);--pk-body:var(--iclpv-fontBody,"IBM Plex Sans",sans-serif)}
/* the title's first sentence = the AI Office page's title gradient (.iclAI01TitleAccent), on its own line */
.iclPk .iclspH1 em{font-style:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(92deg,#9ff9ff 0%,#00f2ff 36%,#ffb38a 68%,#ff6a2a 100%);color:#0000;-webkit-background-clip:text;background-clip:text;display:block;width:fit-content;max-width:100%}
.iclPostQuote{max-width:620px;margin:8px 0 26px;padding:0 0 0 22px;border-left:2px solid var(--pk-acc);font:600 clamp(22px,2.3vw,30px)/1.3 var(--pk-disp);color:var(--pk-text);letter-spacing:-.01em;text-wrap:balance}
.iclspArticleCopy a{color:#ff8a55;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(255,138,85,.45);transition:color .2s,text-decoration-color .2s}
.iclspFaq details p a{color:#ff8a55;text-decoration:underline;text-underline-offset:3px}
.iclspArticleCopy a:hover,.iclspFaq details p a:hover{color:#ffb547;text-decoration-color:currentColor}
/* the chapter's number and label; digits never in IBM Plex Mono (crossed zeros): Space Grotesk, tabular */
.pkNo.iclspEyebrow{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;color:var(--pk-muted);font:500 11px/1.4 var(--pk-mono);letter-spacing:.14em;text-transform:uppercase}
.pkNo.iclspEyebrow b{color:var(--pk-acc);font:700 13px/1 var(--pk-disp);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.pkLead.iclspArticleCopy{max-width:56ch;margin:clamp(14px,1.6vw,22px) 0 0}
/* date, reading and listening time */
.pkMeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;margin-top:18px;color:var(--pk-muted);font:500 12px/1 var(--pk-disp);font-variant-numeric:tabular-nums;letter-spacing:.1em;text-transform:uppercase}
.pkMeta b{color:var(--pk-text);font-weight:600}
.iclspArticleHeader .pkMeta .iclspPostDate{margin:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.iclPk:has(.iclPostListen audio:not([src])) .pkMetaListen{display:none}
.iclPk:has(.iclPostListen audio:not([src])) .pkChap{margin-top:clamp(22px,3vw,36px)}
.iclspSection{scroll-margin-top:calc(var(--pk-top,80px) + var(--pk-bar,47px) + 8px)}

/* the audio block of the pattern, dressed by the script as the homepage's podcast row */
.iclPk .iclPostListen{max-width:760px}
/* R77: the block's height after the script dresses it, reserved before: the text below does not jump (PageSpeed, layout shift) */
.iclPk .iclPostListen:not(.pkUp){box-sizing:border-box;margin-top:clamp(22px,3vw,36px);min-height:139px}
@media (max-width:820px){.iclPk .iclPostListen:not(.pkUp){min-height:171px}}
@media (max-width:640px){.iclPk .iclPostListen:not(.pkUp){min-height:190px}}
.iclPk .iclPostListen:has(audio:not([src])){display:none}
.iclPk .iclPostListen.pkUp{display:block;margin-top:clamp(22px,3vw,36px);padding:0;border:0;background:none}
.iclPostListen.pkUp>.iclPostListenLabel,.iclPostListen.pkUp>.wp-block-audio{display:none}
.iclPk .iclPostListen.pkUp>.iclPodcastEpisodeAiNote{margin:10px 0 0;font-size:13px;line-height:1.45;white-space:normal}
.iclPk .iclPostListen.pkUp>.iclPodcastEpisodeAiNote::before{content:none}
.pkListen{--acc:var(--pk-acc-rgb);--tint:var(--pk-acc-rgb)}
.hpkPPlay{-webkit-appearance:none;appearance:none;cursor:pointer;padding:0;color:inherit}
.hpkPPlay .pa,.hpkPPlay.is-playing .pl{display:none}
.hpkPPlay.is-playing .pa{display:inline}
.hpkPPlay.is-playing{background:rgb(var(--acc))}
.hpkPPlay.is-playing svg{fill:#071014}
.hpkPPlay:focus-visible{outline:2px solid rgb(var(--acc));outline-offset:3px}
/* the paragraph being read */
.pkFollow :is(.iclspArticleCopy p,.iclspH2){transition:color .4s,background .4s,box-shadow .4s}
.pkFollow .iclspArticleCopy p.pkNowRead{color:var(--pk-text);background:linear-gradient(90deg,rgba(var(--pk-acc-rgb),.10),transparent 80%);box-shadow:-14px 0 0 -12px var(--pk-acc);border-radius:2px}
.pkFollow .iclspH2.pkNowRead{color:var(--pk-acc)}

/* chapters under the player: one bar of segments (a chapter = a segment, it fills while reading), the list on click */
.pkChap{max-width:760px;margin-top:12px;margin-bottom:10px;border-radius:16px;background:linear-gradient(180deg,#c4cbd210,#c4cbd205),#0c0f11cc;box-shadow:inset 0 0 0 1px #ffffff14}
.pkChapBar{display:flex;align-items:center;gap:18px;padding:12px 14px 12px 20px}
.pkChapLbl{flex:none;color:#c4cbd2b3;font:500 11px/1 var(--pk-disp);letter-spacing:.14em;text-transform:uppercase}
.pkChapSeg{flex:1;display:flex;gap:6px;margin:0;padding:0;list-style:none;min-width:0}
.pkChapSeg li{position:relative;flex:1}
.pkChapSeg a{display:block;padding:12px 0;outline:none}
.pkChapSeg i{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;transition:background .3s}
.pkChapSeg i::after{content:"";display:block;height:100%;background:var(--pk-acc);transform-origin:left;transform:scaleX(var(--f,0));box-shadow:0 0 8px rgba(var(--pk-acc-rgb),.7)}
.pkChapSeg a:hover i,.pkChapSeg a:focus-visible i{background:rgba(255,255,255,.28)}
.pkChapSeg li::after{content:attr(data-t);position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(-50%,4px);width:max-content;max-width:260px;padding:8px 11px;border-radius:8px;background:#151a1d;box-shadow:inset 0 0 0 1px #ffffff1a,0 12px 24px #0008;color:#e9ecee;font:500 12.5px/1.35 var(--pk-body);white-space:normal;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:3}
.pkChapSeg li:first-child::after{left:0;transform:translate(0,4px)}
.pkChapSeg li:last-child::after{left:auto;right:0;transform:translate(0,4px)}
.pkChapSeg li:hover::after{opacity:1;transform:translate(-50%,0)}
.pkChapSeg li:first-child:hover::after,.pkChapSeg li:last-child:hover::after{transform:none}
.pkChapMore{all:unset;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;color:#dfe4e7;font:500 13px/1 var(--pk-body);box-shadow:inset 0 0 0 1px #ffffff1f;transition:box-shadow .2s,color .2s}
.pkChapMore:hover{box-shadow:inset 0 0 0 1px rgba(var(--pk-acc-rgb),.6);color:#fff}
.pkChapMore:focus-visible{outline:2px solid var(--pk-acc);outline-offset:2px}
.pkChapMore svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s}
.pkChap.open .pkChapMore svg{transform:rotate(180deg)}
.pkChapList{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.pkChapList>ol{overflow:hidden;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin:0;padding:0 20px;list-style:none}
.pkChap.open .pkChapList{grid-template-rows:1fr}
.pkChap.open .pkChapList>ol{padding-bottom:12px}
.pkChapList a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:10px 0;border-top:1px solid rgba(255,255,255,.06);color:#b9c1c6;text-decoration:none;font:500 14px/1.4 var(--pk-body)}
.pkChapList a b{color:var(--pk-acc);font:700 12.5px/1.5 var(--pk-disp);font-variant-numeric:tabular-nums}
.pkChapList a:hover,.pkChapList a.on{color:#fff}
@media (max-width:640px){.pkChapBar{gap:12px;padding:10px 10px 10px 14px}.pkChapLbl{display:none}.pkChapList>ol{grid-template-columns:1fr;padding-inline:14px}.pkChapSeg{gap:4px}}
@media (hover:none){.pkChapSeg li::after{display:none}}

/* the "now reading" bar: the title wraps on a phone instead of being cut */
.pkNow{--acc:var(--pk-acc-rgb);position:fixed;z-index:40;left:0;right:0;top:var(--pk-top,80px);transform:translateY(-110%);opacity:0;transition:transform .35s ease,opacity .35s;background:rgba(7,9,10,.94);border-bottom:1px solid var(--pk-line);backdrop-filter:blur(8px)}
.pkNow.vis{transform:none;opacity:1}
.pkNowWrap{display:flex;align-items:center;gap:14px;min-height:46px;padding-inline:var(--pk-ax,clamp(16px,4vw,40px)) var(--pk-axr,clamp(16px,4vw,40px))}
.pkNow .hpkPPlay{flex:none;width:32px;height:32px}
.pkNow .hpkPPlay svg{width:12px;height:12px}
.pkNowToggle{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;min-width:0;flex:1;padding-block:8px;color:#dfe4e7;font:500 14px/1.3 var(--pk-body)}
.pkNowToggle b{flex:none;color:var(--pk-acc);font:600 13px/1 var(--pk-disp);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.pkNowToggle span{min-width:0}
.pkNowToggle i{flex:none;margin-left:auto;color:var(--pk-muted);font:normal 500 11px/1 var(--pk-mono);letter-spacing:.12em;text-transform:uppercase}
.pkNowBar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--pk-acc);transform-origin:left;transform:scaleX(var(--p,0))}
.pkNowList{display:none;max-height:min(60vh,420px);overflow:auto;border-top:1px solid var(--pk-line);padding-inline:var(--pk-ax,clamp(16px,4vw,40px)) var(--pk-axr,clamp(16px,4vw,40px))}
.pkNow.open .pkNowList{display:block}
.pkNowList ol{margin:0;padding:6px 0 12px;list-style:none}
.pkNowList a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:10px 0;color:#cfd5d9;text-decoration:none;font:500 14.5px/1.4 var(--pk-body)}
.pkNowList a b{color:var(--pk-acc);font:600 13px/1.6 var(--pk-disp);font-variant-numeric:tabular-nums}
.pkNowList a.on{color:var(--pk-text)}
@media (max-width:640px){.pkNowToggle{font-size:13px;gap:10px}.pkNowToggle i{display:none}}
@media (prefers-reduced-motion:reduce){.pkNow,.pkChapList,.pkChapMore svg{transition:none}}

/* the scene's place in the post: the full width of the window, whatever the column */
.pkWide{position:relative;margin-block:clamp(24px,4vw,48px)}