/* ---------- protected tiles: the pill stretches out and the lock unlocks ---------- */
.lockbar{position:relative;display:inline-flex;align-items:center;gap:0;height:34px;max-width:100%;border:1px solid var(--line);border-radius:99px;background:transparent;overflow:visible;
  transition:width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1),border-color .25s,background .25s,box-shadow .25s;--lbc:var(--fg)}
.lockbar:hover{border-color:color-mix(in srgb,var(--fg) 35%,var(--line))}
.lb-open{display:inline-flex;align-items:center;gap:7px;height:100%;padding:0 12px 0 10px;border:0;border-radius:99px;background:none;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap;transition:opacity .2s,padding .45s cubic-bezier(.2,.8,.2,1)}
.lockbar:hover .lb-open{color:var(--fg)}
.lk{display:grid;place-content:center;flex:none;color:currentColor;transition:color .25s}
.lk svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1)}
.lk .shackle{transform-origin:16px 11px;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.lockbar input,.lb-go{display:none}
.lb-err{position:absolute;left:14px;top:calc(100% + 8px);margin:0;font-size:14px;color:#d70015;white-space:nowrap}
:root:not([data-theme="light"]) .lb-err{color:#ff6961}
.lockbar.expanded{display:flex;height:52px;border-color:color-mix(in srgb,var(--fg) 28%,var(--line));background:var(--surface);margin-bottom:26px}
.lockbar.expanded .lb-open{padding:0 6px 0 16px;color:var(--fg);cursor:default}
.lockbar.expanded .ll{display:none}
.lockbar.expanded .lk svg{width:26px;height:26px}
.lockbar.expanded input{display:block;flex:1;min-width:0;height:100%;border:0;background:none;color:var(--fg);font:inherit;font-size:16px;padding:0 10px;outline:0;animation:lb-fade .3s .12s both}
.lockbar.expanded input::placeholder{color:var(--muted)}
.lockbar.expanded .lb-go{display:inline-flex;align-items:center;justify-content:center;height:40px;margin-right:6px;padding:0 18px;border:0;border-radius:99px;background:var(--fg);color:var(--bg);font:inherit;font-size:15px;font-weight:600;cursor:pointer;animation:lb-fade .3s .12s both}
.lb-go:disabled{opacity:.6;cursor:default}
.lockbar:focus-within.expanded{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
/* wrong: red, shakes, the lock rattles but stays shut */
.lockbar.bad{border-color:#d70015!important;box-shadow:0 0 0 3px rgba(215,0,21,.18)!important}
.lockbar.bad .lb-open{color:#d70015}
:root:not([data-theme="light"]) .lockbar.bad{border-color:#ff6961!important}
:root:not([data-theme="light"]) .lockbar.bad .lb-open{color:#ff6961}
.lockbar.shake{animation:lb-shake .5s cubic-bezier(.36,.07,.19,.97)}
.lockbar.shake .shackle{animation:lb-rattle .5s ease}
/* right: green, the shackle lifts and swings open */
.lockbar.good{border-color:#34c759!important;box-shadow:0 0 0 3px rgba(52,199,89,.2)!important}
.lockbar.good .lb-open{color:#34c759}
.lockbar.good .lb-go{background:#34c759;color:#fff}
.lockbar.good .shackle{transform:translateY(-3px) rotate(30deg)}
@keyframes lb-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
@keyframes lb-rattle{0%,100%{transform:none}25%{transform:translateY(-1.5px) rotate(10deg)}60%{transform:translateY(-1px) rotate(-6deg)}}
@keyframes lb-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lockbar,.lk svg,.lk .shackle,.lb-open{transition:none}.lockbar.shake,.lockbar.shake .shackle,.lockbar input,.lb-go{animation:none!important}}

/* expanded pill: same height as the button, centred with it; the error gets its own room only when shown */
.lockbar.expanded{height:48px;margin-bottom:0}
.lockbar.expanded .lb-go{height:38px}
.cta-row:has(.lockbar.bad){padding-bottom:28px}

/* case pages: the pill sits under the Next / Previous link to a protected case study */
.nx{display:grid;gap:10px;justify-items:start}
.nx.r{margin-left:auto;text-align:right;justify-items:end}
.nx:has(.lockbar.bad){padding-bottom:28px}
.nx .lb-err{left:auto;right:14px}
.nx:not(.r) .lb-err{left:14px;right:auto}
/* room under the pill so the error line and the floating prompt bar never cover it */
.c-next:has(.lockbar){padding-bottom:150px}
/* Next / Previous stay on one line with All work; the pill hangs underneath */
.c-next:has(.nx){align-items:flex-start}
.nx{flex:0 1 auto;min-width:0;max-width:100%}
.nx{grid-template-columns:minmax(0,100%)}
.nx .lockbar{max-width:none}

/* status: once unlocked, the pill stays and says so, with the lock open */
.lockbar.unlocked{border-color:color-mix(in srgb,#34c759 45%,var(--line))}
.lockbar.unlocked .lb-open,.lockbar.unlocked:hover .lb-open{color:#248a3d}
:root:not([data-theme="light"]) .lockbar.unlocked .lb-open,:root:not([data-theme="light"]) .lockbar.unlocked:hover .lb-open{color:#34c759}
.lockbar.unlocked .shackle{transform:translateY(-3px) rotate(30deg)}
.lockbar.unlocked .lb-open{cursor:default;pointer-events:none}

/* request access: a quiet line under the open password box. It copies the address and opens the visitor's mail app. */
.lb-ask{display:none;position:absolute;left:14px;top:calc(100% + 8px);margin:0;font-size:14px;color:var(--muted);white-space:nowrap}
.lockbar.expanded .lb-ask{display:block}
.lockbar.bad .lb-ask{top:calc(100% + 34px)}
.lockbar.good .lb-ask{display:none}
.lb-req{padding:0;border:0;background:none;font:inherit;color:var(--fg);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lb-req:hover{color:var(--accent)}
.nx.r .lb-ask{left:auto;right:14px}
.cta-row:has(.lockbar.bad){padding-bottom:56px}
.nx:has(.lockbar.bad){padding-bottom:56px}

/* And more cards: keep the "Request access" line inside the card frame (room under the open pill; the wrong-password state already reserves its own) */
.mcard .lockbar.expanded{margin-bottom:32px}
.mcard .lockbar.expanded.bad{margin-bottom:0}

/* home feature rows: leave room under the open password pill so "Request access" clears whatever sits below it */
.row .cta-row:has(.lockbar.expanded){padding-bottom:44px}
.row .cta-row:has(.lockbar.bad){padding-bottom:72px}

/* compact open pill: passwords are short, so it needn't span the row */
.lockbar.expanded,.nx .lockbar.expanded{width:min(240px,100%);max-width:min(240px,100%);flex:0 0 auto}
/* smaller ghost text so "Password" fits the compact box; typed text stays 16px */
.lockbar.expanded input{padding:0 6px}
.lockbar.expanded input::placeholder{font-size:13px}
.lockbar.expanded .lb-go{padding:0 14px}

/* when the open pill can't share a line with the button, the row stacks them before the pill grows */
.cta-row.lb-stack{flex-direction:column;flex-wrap:nowrap;align-items:flex-start}

/* layout is settled instantly while the pill is out of sight */
.lb-nt,.lb-nt *{transition:none!important}