/* ==================================================================
   chrome/publisher.css — the WP Publisher for Claude family. Derived
   from the companion family (a glass bar, a soft footer card with four
   columns) in the extension's navy and coral. Light and quiet: navy is
   only used for the Download button and type.

   Header: settles in on load; a soft pill glides behind the link for the
   section in view; the bar steps aside on the way down and returns on
   the way up. Only opacity and transforms move (no layout shift).
   Footer: a pale card whose top edge is the publishing pipeline; its parts
   rise in once as it arrives.
   ================================================================== */

.ph,.pf{--c-head:#101e32;--c-text:#36435a;--c-muted:#6a768a;--c-line:rgba(16,30,50,.09);--c-acc:#e85d43;--c-acc2:#ff765c;--c-soft:#fff1ec;
  --c-ease:cubic-bezier(.22,.9,.24,1);--c-spring:cubic-bezier(.34,1.4,.64,1);
  --c-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
.ph{view-transition-name:site-head}

/* ================================================================ header */
.ph{position:fixed;top:14px;left:0;right:0;z-index:120;padding:0 12px;pointer-events:none;font-family:var(--c-sans);transition:transform .55s var(--c-ease)}
.ph>*{pointer-events:auto}
.ph__bar{position:relative;display:flex;align-items:center;gap:14px;width:min(1200px,100%);height:62px;margin:0 auto;padding:0 9px 0 11px;border-radius:20px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 0 rgba(16,30,50,.04),0 16px 40px -30px rgba(16,30,50,.28);
  animation:phIn .9s var(--c-ease) both;transition:background .4s,box-shadow .4s}
@keyframes phIn{from{opacity:0;transform:translateY(-10px);filter:blur(6px)}}
html:not([data-stop]) .ph__bar{background:rgba(255,255,255,.9);box-shadow:0 1px 0 rgba(16,30,50,.04),0 20px 44px -30px rgba(16,30,50,.34)}
html[data-sdir="down"]:not([data-stop]) .ph:not(.-open){transform:translateY(calc(-100% - 22px))}

.ph__brand{flex:none;display:flex;align-items:center;gap:10px;color:var(--c-head);text-decoration:none;min-width:0}
.ph__logo{flex:none;width:38px;height:38px;border-radius:11px;box-shadow:0 6px 14px -6px rgba(16,30,50,.35);transition:transform .5s var(--c-spring)}
.ph__brand:hover .ph__logo{transform:rotate(-6deg) scale(1.06)}
.ph__name{display:flex;flex-direction:column;font:800 15px/1.15 var(--c-sans);letter-spacing:-.02em;white-space:nowrap}
.ph__name small{font:500 11.5px/1.35 var(--c-sans);letter-spacing:0;color:var(--c-muted)}

/* links, with a soft pill that glides behind the one in view */
.ph__nav{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:2px;min-width:0}
.ph__nav a{position:relative;z-index:1;padding:9px 14px;border-radius:12px;font:600 14px var(--c-sans);color:var(--c-text);text-decoration:none;white-space:nowrap;transition:color .3s}
.ph__nav a:hover,.ph__nav a.-on{color:var(--c-head)}
.ph__pill{position:absolute;z-index:0;left:0;top:50%;height:38px;width:var(--pw,0);margin-top:-19px;border-radius:12px;background:var(--c-soft);box-shadow:inset 0 0 0 1px rgba(255,118,92,.16);
  opacity:0;transform:translateX(var(--px,0));transition:transform .55s var(--c-spring),width .55s var(--c-spring),opacity .3s}
.ph__nav.-has .ph__pill{opacity:1}

.ph__act{flex:none;display:flex;align-items:center;gap:6px}
.ph__find{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:none;cursor:pointer;color:var(--c-text);transition:background .25s,color .25s}
.ph__find:hover{background:var(--c-soft);color:var(--c-head)}
.ph__find svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ph__audit{padding:10px 14px;border-radius:12px;font:600 14px var(--c-sans);color:var(--c-text);text-decoration:none;white-space:nowrap;transition:color .25s,background .25s}
.ph__audit:hover{color:var(--c-acc);background:var(--c-soft)}
.ph__cta{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px 0 12px;border-radius:12px;background:var(--c-head);color:#fff;font:700 14px var(--c-sans);text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 22px -14px rgba(16,30,50,.7);transition:background .3s,box-shadow .3s}
.ph__cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--c-spring)}
.ph__cta:hover svg{transform:translateY(2px)}
.ph__cta:hover{background:#1c2f4a;box-shadow:0 14px 26px -14px rgba(16,30,50,.75)}
.ph__menu{display:none;position:relative;width:40px;height:40px;border:0;border-radius:12px;background:rgba(16,30,50,.05);cursor:pointer}
.ph__menu i{position:absolute;left:12px;right:12px;height:1.8px;border-radius:2px;background:var(--c-head);transition:transform .4s var(--c-ease),top .4s var(--c-ease)}
.ph__menu i:nth-of-type(1){top:16px}.ph__menu i:nth-of-type(2){top:23px}
.ph__menu[aria-expanded="true"] i:nth-of-type(1){top:19.5px;transform:rotate(45deg)}
.ph__menu[aria-expanded="true"] i:nth-of-type(2){top:19.5px;transform:rotate(-45deg)}

.ph__sheet{width:min(1200px,100%);margin:8px auto 0;border-radius:20px;background:#fff;border:1px solid rgba(16,30,50,.08);box-shadow:0 30px 70px -40px rgba(16,30,50,.4);
  max-height:calc(100svh - 100px);overflow:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s,transform .45s var(--c-ease),visibility .45s}
.ph.-open .ph__sheet{opacity:1;visibility:visible;transform:none}
.ph__sheetin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:18px}
.ph__col{display:flex;flex-direction:column;gap:1px}
.ph__h{margin:0 0 8px;padding:0 10px;font:600 11px var(--c-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.ph__col a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;font:600 14.5px var(--c-sans);color:var(--c-text);text-decoration:none;transition:background .2s,color .2s}
.ph__col a:hover,.ph__col a.-on{background:var(--c-soft);color:var(--c-head)}
.ph__col a.ph__sheetcta{color:var(--c-acc)}
.ph__col a.ph__sheetcta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:1060px){.ph__nav{display:none}.ph__menu{display:block}.ph__act{margin-left:auto}}
@media (max-width:640px){.ph__sheetin{grid-template-columns:1fr}.ph__audit{display:none}}
@media (max-width:480px){
  .ph__bar{gap:8px;padding:0 7px 0 9px}
  .ph__find,.ph__name small{display:none}
  .ph__logo{width:34px;height:34px}
  .ph__name{font-size:14px}
  .ph__cta{width:40px;height:38px;padding:0;justify-content:center}
  .ph__cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ph__menu{width:38px;height:38px}
  .ph__menu i:nth-of-type(1){top:15px}.ph__menu i:nth-of-type(2){top:22px}
  .ph__menu[aria-expanded="true"] i:nth-of-type(1),.ph__menu[aria-expanded="true"] i:nth-of-type(2){top:18.5px}
}


/* ================================================================ footer */
.pf{position:relative;margin:clamp(40px,6vw,80px) 0 0;padding:0 12px 12px;font-family:var(--c-sans);color:var(--c-text)}
.pf__in{position:relative;width:min(1240px,100%);margin:0 auto;padding:0 clamp(20px,4.5vw,60px) 20px;border-radius:36px;
  background:linear-gradient(180deg,#fbf8f4 0%,#f3eee7 100%);border:1px solid rgba(255,118,92,.13);isolation:isolate;overflow:hidden}
/* the top edge is the publishing pipeline: Draft → Review → Approve → Published */
.pf__flow{display:flex;align-items:center;gap:0;margin:0 0 clamp(26px,4vw,40px);padding:18px 0 0;list-style:none;counter-reset:f;overflow:hidden}
.pf__flow li{position:relative;display:flex;align-items:center;gap:8px;padding:7px 14px 7px 9px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid var(--c-line);font:600 12.5px var(--c-sans);color:var(--c-muted);white-space:nowrap;counter-increment:f}
.pf__flow li::before{content:counter(f);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(16,30,50,.06);font:700 11px var(--c-sans);color:var(--c-muted)}
.pf__flow li+li{margin-left:34px}
.pf__flow li+li::after{content:"";position:absolute;right:100%;top:50%;width:34px;height:2px;margin-top:-1px;background:linear-gradient(90deg,rgba(16,30,50,.12),rgba(255,118,92,.5));transform-origin:left;transform:scaleX(var(--fl,1))}
.pf__flow li.-on{background:#fff;color:var(--c-head);box-shadow:0 8px 18px -12px rgba(16,30,50,.35)}
.pf__flow li.-on::before{content:"";background:var(--c-acc2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5 10 16.5 18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat}
.pf__in::before{content:"";position:absolute;right:-10%;top:-30%;width:55%;aspect-ratio:1;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,118,92,.14),transparent 65%);animation:pfDrift 20s ease-in-out infinite alternate}
@keyframes pfDrift{to{transform:translate(-10%,12%) scale(1.08)}}

.pf__top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px 26px}
.pf__brand{display:flex;align-items:center;gap:10px;color:var(--c-head);text-decoration:none;font:800 17px var(--c-sans);letter-spacing:-.02em;white-space:nowrap}
.pf__brand img{width:40px;height:40px;border-radius:12px}
.pf__pitch{margin:0;max-width:60ch;font-size:15px;line-height:1.6;color:var(--c-muted)}
.pf__dl{display:inline-flex;align-items:center;gap:12px;padding:11px 18px 11px 14px;border-radius:16px;background:var(--c-head);color:#fff;text-decoration:none;
  box-shadow:0 14px 28px -18px rgba(16,30,50,.7);transition:transform .45s var(--c-spring),box-shadow .3s,background .3s}
.pf__dl:hover{transform:translateY(-3px);background:#1c2f4a;box-shadow:0 18px 32px -18px rgba(16,30,50,.75)}
.pf__dl svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--c-acc2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf__dl span{display:flex;flex-direction:column;line-height:1.25}
.pf__dl b{font:700 14.5px var(--c-sans)}
.pf__dl small{font:500 12px var(--c-sans);color:rgba(255,255,255,.7)}

.pf__mid{min-width:0}

.pf__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(28px,4vw,44px);padding-top:clamp(24px,3.5vw,36px);border-top:1px solid var(--c-line)}
.pf__cols nav{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.pf__h{margin:0 0 10px;font:600 11px var(--c-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.pf__cols a{position:relative;padding:4px 0;font:500 14.5px var(--c-sans);color:var(--c-text);text-decoration:none;transition:color .25s}
.pf__cols a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--c-acc);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--c-ease)}
.pf__cols a:hover{color:var(--c-head)}
.pf__cols a:hover::after{transform:scaleX(1)}

.pf__base{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:clamp(24px,3.5vw,40px);padding-top:16px;border-top:1px solid var(--c-line);font:500 13px var(--c-sans);color:var(--c-muted)}
.pf__base>span:first-child{flex:1}
.pf__legal{display:flex;gap:18px}
.pf__legal a{color:var(--c-muted);text-decoration:none;transition:color .2s}
.pf__legal a:hover{color:var(--c-head)}
.pf__up{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#fff;border:1px solid var(--c-line);color:var(--c-head);cursor:pointer;transition:transform .4s var(--c-spring),box-shadow .3s}
.pf__up:hover{transform:translateY(-3px);box-shadow:0 10px 20px -12px rgba(16,30,50,.4)}
.pf__up svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.js-pf .pf [data-rise]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--c-ease),transform .8s var(--c-ease);transition-delay:calc(var(--i,0) * 70ms)}
.js-pf .pf.-in [data-rise]{opacity:1;transform:none}
.js-pf .pf__flow li+li::after{--fl:0;transition:transform .7s var(--c-ease);transition-delay:calc(.25s + var(--j,0) * 180ms)}
.js-pf .pf.-in .pf__flow li+li::after{--fl:1}
.js-pf .pf__flow li.-on{transition:box-shadow .5s,background .5s;transition-delay:.9s}

@media (max-width:900px){
  .pf__top{grid-template-columns:minmax(0,1fr)}
  .pf__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf__flow li:nth-child(n+3){display:none}
}
@media (max-width:480px){.pf__in{border-radius:28px}.pf__base>span:first-child{flex-basis:100%}}

@media (prefers-reduced-motion:reduce){
  .ph,.ph__bar,.ph__sheet,.ph__pill,.pf__in::before{animation:none;transition:none}
  html[data-sdir="down"]:not([data-stop]) .ph:not(.-open){transform:none}
  .js-pf .pf [data-rise]{opacity:1;transform:none;transition:none}
}
@media print{.ph{display:none}.pf__in{background:none;border:0}}