/* Kind Words, the panel. One fixed size for every step. A header
   with the mark and a close button, the step in the middle, and help links pinned at the bottom. It opens on the page
   you are on (panel.js), and as Chrome's popover on Chrome's own pages, at the same size. White, Satoshi, soft corners,
   faces round and black and white, aqua behind the recommendations. The cards come from kwpack.js. */
@font-face{font-family:'Satoshi';src:url(fonts/satoshi-500.woff2) format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'Satoshi';src:url(fonts/satoshi-700.woff2) format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'Satoshi';src:url(fonts/satoshi-900.woff2) format('woff2');font-weight:900;font-display:block}

:root{
  --ink:#0D0D0D;
  --mut:#5E5E5E;
  --soft:#F2F2F2;
  --line:#ECECEC;
  --aqua:#2EDBCF;
  --out:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0}
html,body{background:#fff}
/* the same size on every step. On a page the frame is the panel, and as the popover it is 400 by 600 */
body{width:400px;height:600px;display:flex;flex-direction:column;overflow:hidden;color:var(--ink);font:500 15px/1.45 'Satoshi',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.page{width:auto;height:100vh}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
img{display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- header ---------- */
.bar{flex:none;height:60px;display:flex;align-items:center;gap:10px;padding:0 14px 0 20px}
.mk{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:var(--aqua);font:900 11.5px/1 'Satoshi';letter-spacing:-.06em}
.wm{font:700 16.5px/1 'Satoshi';letter-spacing:-.02em}
.x{margin-left:auto;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;transition:background-color .15s}
.x:hover{background:var(--soft)}
.x svg{width:14px;height:14px;fill:var(--ink)}

/* ---------- the pin hint, right after install ---------- */
.pin{flex:none;display:flex;align-items:center;gap:10px;margin:0 20px 6px;padding:10px 10px 10px 14px;border-radius:12px;background:var(--soft)}
.pin-ico{width:18px;height:18px;flex:none;fill:var(--ink)}
.pin p{flex:1;font:500 13px/1.35 'Satoshi'}
.pin-x{width:28px;height:28px;display:grid;place-items:center;flex:none;border-radius:50%}
.pin-x:hover{background:rgba(13,13,13,.07)}
.pin-x svg{width:13px;height:13px;fill:var(--ink)}
body[data-at="login"] .pin{display:none}

/* ---------- the step, in the space between header and footer ---------- */
main{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.pane{display:none;flex:1;min-height:0;flex-direction:column;padding:0 24px 20px}
body[data-at="checking"] [data-pane="checking"],
body[data-at="hello"] [data-pane="hello"],
body[data-at="signedout"] [data-pane="signedout"],
body[data-at="login"] [data-pane="login"],
body[data-at="working"] [data-pane="working"],
body[data-at="done"] [data-pane="done"],
body[data-at="said"] [data-pane="said"]{display:flex;animation:in .4s var(--out) both}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* the welcome, the reading and anything LinkedIn says sit in the middle of the panel */
[data-pane="hello"],[data-pane="signedout"],[data-pane="login"],[data-pane="working"],[data-pane="said"],[data-pane="checking"]{justify-content:center;text-align:center}

.line{font:700 24px/1.2 'Satoshi';letter-spacing:-.018em;text-wrap:balance;margin:22px 0 22px}

/* ---------- the welcome. Three real Kind Words cards, fanned on an aqua field ---------- */
.show{flex:none;position:relative;height:286px;border-radius:18px;overflow:hidden;
  background:radial-gradient(130% 110% at 50% 0%,#E6FBF8 0%,#C4F2EC 55%,#A6EAE1 100%)}
.deck,.deck .kind-words,.deck .kind-words .kw-track{position:absolute;inset:0;columns:auto}
.deck .kind-words .kw-card{position:absolute;left:50%;top:44px;width:224px;margin:0 0 0 -112px;padding:16px 16px 14px;border:0;border-radius:14px;background:#fff;text-align:left;
  box-shadow:0 1px 2px rgba(13,13,13,.06),0 16px 32px -12px rgba(13,13,13,.32);animation:deal .75s var(--out) both}
.deck .kind-words .kw-card:nth-child(1){translate:-64px 26px;rotate:-8deg;scale:.8;z-index:1;animation-delay:.06s}
.deck .kind-words .kw-card:nth-child(3){translate:64px 26px;rotate:8deg;scale:.8;z-index:1;animation-delay:.14s}
.deck .kind-words .kw-card:nth-child(2){z-index:2;animation-delay:.24s}
.deck .kind-words .kw-words{margin-bottom:12px}
@keyframes deal{from{opacity:0;transform:translateY(36px)}}

/* ---------- buttons ---------- */
.btn{flex:none;height:52px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;background:var(--ink);color:#fff;
  font:500 16px/1 'Satoshi';letter-spacing:0;transition:transform .3s var(--out),background-color .2s,opacity .2s}
.btn:hover{background:#262626}
.btn:active{transform:scale(.985)}
.btn[aria-busy="true"]{opacity:.55;pointer-events:none}
.btn.alt{background:var(--soft);color:var(--ink)}
.btn.alt:hover{background:#E7E7E7}
/* Continue, with the member's own LinkedIn face in it, the way Google and LinkedIn do it */
.btn.me{padding:0 18px 0 12px}
.btn.me img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none;background:#333}

/* what Kind Words reads and where it stays, under the button, before anything is read */
.fine{margin-top:12px;font:500 12.5px/1.45 'Satoshi';color:var(--mut);text-wrap:balance}

/* ---------- signing in. LinkedIn's own page is in the tab beside this one, and the panel waits for it ---------- */
[data-pane="login"] .line{margin:22px 0 6px}
[data-pane="login"] .again{margin-top:18px}

/* ---------- reading. Their own face in an aqua ring that turns while Kind Words reads ---------- */
.ring{position:relative;width:104px;height:104px;margin:0 auto;border-radius:50%}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--aqua) 0 28%,transparent 28% 100%);animation:turn 1.1s linear infinite;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}
.ring img{position:absolute;inset:10px;width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 22%;background:var(--soft)}
@keyframes turn{to{transform:rotate(1turn)}}
[data-pane="working"] .line{margin-bottom:6px}
.sub{color:var(--mut);font-size:14.5px}

.dots{display:flex;gap:7px;justify-content:center}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--ink);animation:blip 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes blip{50%{opacity:.2}}

/* ---------- the result. Their faces, then the builder is one press away at the bottom ---------- */
[data-pane="done"]{justify-content:center}
[data-pane="done"] .line{margin:16px 0 24px;text-align:center}
.faces{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0 0 4px}
.faces span{aspect-ratio:1;overflow:hidden;border-radius:50%;background:var(--soft);display:grid;place-items:center;font:700 13px/1 'Satoshi';
  opacity:0;transform:scale(.8);animation:land .42s var(--out) forwards}
.faces img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1)}
.faces span.more{background:var(--ink);color:#fff;font-weight:500}
@keyframes land{to{opacity:1;transform:none}}
.acts{display:flex;flex-direction:column;gap:8px}
.note{font-size:12.5px;line-height:1.45;color:var(--mut);text-align:center}
.note:empty{display:none}
.again{align-self:center;padding:6px 0 0;font:500 13px/1 'Satoshi';color:var(--mut);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.again:hover{color:var(--ink)}

/* ---------- footer. Help is always one press away ---------- */
.foot{flex:none;display:flex;justify-content:center;gap:22px;padding:12px 0 16px;border-top:1px solid var(--line)}
.foot a{font:500 13px/1 'Satoshi';color:var(--mut);text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}
}

/* a profile with none yet can still try the builder, with samples */
[data-pane="said"] .btn + .btn{margin-top:8px}