/* ACCESS LOCK BAR — Pulse > Access Codes header (2026-10-03)
   1) The navy header had an empty middle: it now holds the site-lock method (buttons, not a drop-down)
      and, under it, every lock setting.
   2) The Invite / Export menus were clipped by the panel's overflow:hidden and opened from the left edge of
      their button, so they ran off the right side of the screen (and pushed the page sideways). The panel no
      longer clips, and the menus open from the button's right edge. */

/* ---- menus: never clipped, never off-screen ---- */
.req-cc .vc-otac-panel{overflow:visible;}
.req-cc .vc-otac-panel > .vc-panel-head{border-radius:var(--cd-r,16px) var(--cd-r,16px) 0 0;}
.req-cc .vc-otac-panel > .vc-panel-head::before{border-radius:inherit;overflow:hidden;}
.req-cc .vc-otac-panel > .vc-panel-head > .otac-bk-bar{position:relative;z-index:8;flex-wrap:nowrap!important;}
.vc-otac-panel .oc-inv-menu,
.vc-otac-panel #otacBkMenu{inset-inline-start:auto!important;inset-inline-end:0;max-width:calc(100vw - 24px);}
.vc-otac-panel #otacBkMenu{inset-inline-end:auto!important;inset-inline-start:0;}
.vc-otac-panel .oc-inv-menu{color:#0f2140;}
@media (max-width:640px){
  .vc-otac-panel .otac-bk-bar{flex-wrap:wrap!important;}
  .vc-otac-panel #otacBkMenu{inset-inline-start:0!important;}
}

/* ---- header grid: title | lock method | tools, then the settings row ---- */
.req-cc .vc-otac-panel > .vc-panel-head.alk-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;}
.alk-head > div:first-child{order:1;}
.alk-head > .alk-mid{order:2;}
.alk-head > .otac-bk-bar{order:3;}
.alk-head > .alk-body{order:4;flex:1 0 100%;}

.alk-mid{flex:1 1 420px;min-width:0;display:flex;align-items:center;justify-content:center;gap:12px;}
.alk-mid-t{display:inline-flex;align-items:center;gap:7px;font:800 10.5px var(--cd-mono,monospace);letter-spacing:1.4px;text-transform:uppercase;color:var(--cd-gold2,#DDBB94);white-space:nowrap;}
.alk-head[data-lock="locked"] .alk-mid-t i::before{content:"\f023";}
.alk-modes{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);max-width:100%;overflow-x:auto;scrollbar-width:none;}
.alk-modes::-webkit-scrollbar{display:none;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-mode{position:relative;flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:10px;border:1px solid transparent;background:transparent;color:rgba(255,255,255,.82);font:700 12px var(--cd-body,Inter,sans-serif);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-mode:hover{background:rgba(255,255,255,.14);color:#fff;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-mode[aria-checked="true"]{background:var(--cd-gold,#CEA577);color:#162D4C;border-color:var(--cd-gold2,#DDBB94);box-shadow:0 4px 12px rgba(0,0,0,.25);}
.alk-mode i{font-size:12px;}
.alk-mode em{position:absolute;top:-7px;inset-inline-end:-2px;font:800 8px/1 var(--cd-mono,monospace);letter-spacing:.6px;text-transform:uppercase;padding:2px 5px;border-radius:99px;background:#1E8E5A;color:#fff;font-style:normal;}
.alk-mode:focus-visible{outline:2px solid var(--cd-gold2,#DDBB94);outline-offset:2px;}

/* ---- settings row ---- */
.alk-body{padding:12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:12px;}
.alk-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.alk-state{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;line-height:1.25;}
.alk-state b{font-size:14px;color:#fff;}
.alk-state span{font-size:12px;color:rgba(255,255,255,.7);}
.alk-pending{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:rgba(224,138,0,.2);color:#ffd48a;font:700 11.5px var(--cd-body,Inter,sans-serif);}
.alk-pending[hidden]{display:none;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-apply{height:36px;padding:0 16px;border-radius:11px;border:1px solid transparent;background:rgba(255,255,255,.14);color:rgba(255,255,255,.7);font:800 12.5px var(--cd-body,Inter,sans-serif);display:inline-flex;align-items:center;gap:7px;cursor:pointer;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-apply.is-dirty{background:var(--cd-gold,#CEA577);color:#162D4C;box-shadow:0 0 0 3px rgba(206,165,119,.3);}
.req-cc .vc-otac-panel > .vc-panel-head .alk-apply:disabled{opacity:.6;cursor:progress;}

.alk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;align-items:start;}
.alk-grid > [hidden]{display:none!important;}
.alk-f{display:flex;flex-direction:column;gap:6px;min-width:0;}
.alk-f > label{font:800 10.5px var(--cd-mono,monospace);letter-spacing:1.1px;text-transform:uppercase;color:var(--cd-gold2,#DDBB94);}
.alk-f small{font-size:11px;color:rgba(255,255,255,.62);}
.alk-body textarea,.alk-body input[type=text]{width:100%;box-sizing:border-box;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(8,16,30,.45);color:#fff;font:500 13px/1.4 var(--cd-body,Inter,sans-serif);padding:8px 10px;resize:vertical;}
.alk-body input[type=text]{height:36px;padding:0 10px;}
.alk-body textarea::placeholder,.alk-body input::placeholder{color:rgba(255,255,255,.4);}
.alk-body textarea:focus,.alk-body input[type=text]:focus{outline:2px solid var(--cd-gold,#CEA577);outline-offset:0;border-color:transparent;}
.alk-inline{display:flex;gap:6px;align-items:center;min-width:0;}
.alk-inline input{flex:1 1 auto;min-width:0;font-family:var(--cd-mono,monospace)!important;letter-spacing:.4px;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-body button:not(.alk-apply){height:36px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;font:700 12px var(--cd-body,Inter,sans-serif);display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;flex:none;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-body button:not(.alk-apply):hover{background:rgba(255,255,255,.2);}
.req-cc .vc-otac-panel > .vc-panel-head .alk-body .alk-gold{background:var(--cd-gold,#CEA577);color:#162D4C;border-color:transparent;}
.alk-codeinfo{margin:0;font-size:12px;color:rgba(255,255,255,.75);}
.alk-chip{display:inline-block;padding:2px 8px;border-radius:7px;background:rgba(255,255,255,.14);color:#fff;font-weight:700;}
.alk-dim{opacity:.7;}
.alk-code{grid-column:span 2;}
.alk-note{flex-direction:row;align-items:center;gap:10px;font-size:12.5px;color:rgba(255,255,255,.8);}
.alk-note i{color:var(--cd-gold2,#DDBB94);}
.alk-note span{flex:1 1 auto;}

/* preview switch */
.alk-switch{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);cursor:pointer;}
.alk-switch:has(input:checked){border-color:var(--cd-gold,#CEA577);background:rgba(206,165,119,.14);}
.alk-sw-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.12);color:var(--cd-gold2,#DDBB94);font-size:13px;}
.alk-sw-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3;}
.alk-sw-txt b{font-size:13px;color:#fff;}
.alk-sw-txt em{font-style:normal;font-size:11px;color:rgba(255,255,255,.65);}
.alk-switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.alk-track{flex:none;position:relative;width:38px;height:22px;border-radius:99px;background:rgba(255,255,255,.25);transition:background .15s;}
.alk-track::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;}
.alk-switch input:checked ~ .alk-track{background:#1E8E5A;}
.alk-switch input:checked ~ .alk-track::after{transform:translateX(16px);}
[dir=rtl] .alk-switch input:checked ~ .alk-track::after{transform:translateX(-16px);}
.alk-switch:focus-within{outline:2px solid var(--cd-gold,#CEA577);outline-offset:2px;}

@media (max-width:900px){
  .alk-mid{flex:1 1 100%;order:3!important;flex-direction:column;align-items:stretch;gap:6px;}
  .alk-head > .otac-bk-bar{order:2;}
  .alk-head > .alk-body{order:4;}
  .alk-mid-t{justify-content:flex-start;}
  .alk-code{grid-column:auto;}
}
@media (max-width:520px){
  .alk-inline{flex-wrap:wrap;}
  .alk-inline input{flex:1 1 100%;}
}

/* ---- phones: nothing may force the panel wider than the screen ---- */
.req-cc .vc-otac-panel,.req-cc .vc-otac-panel > .vc-panel-head,.alk-mid,.alk-modes,.alk-body{min-width:0;max-width:100%;box-sizing:border-box;}
@media (max-width:900px){
  .alk-modes{width:100%;contain:inline-size;}
  .alk-head > .otac-bk-bar{flex:1 1 100%;}
  .alk-head > .otac-bk-bar > button,.alk-head > .otac-bk-bar > .oc-inv{flex:1 1 0;}
  .alk-head > .otac-bk-bar > .oc-inv > button{width:100%;}
}
.req-cc > *,.req-cc #vcSectionBody,.req-cc .vc-panel{min-width:0;max-width:100%;}

/* ---- v2: the settings card takes NO space — it floats under the header only while it is needed ---- */
.req-cc .vc-otac-panel > .vc-panel-head.alk-head{position:relative;}
.req-cc .vc-otac-panel > .vc-panel-head > .alk-body{position:absolute;top:calc(100% + 8px);inset-inline:12px;z-index:40;flex:none;
  max-height:min(70vh,560px);overflow:auto;background:#142744;border:1px solid rgba(255,255,255,.2);box-shadow:0 18px 44px rgba(8,16,30,.45);}
.alk-body[data-open="0"]{display:none!important;}
.alk-body[data-open="1"]{animation:alkIn .16s ease-out;}
@keyframes alkIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.alk-body[data-open="1"]{animation:none;}}
.req-cc .vc-otac-panel > .vc-panel-head .alk-gear{flex:none;width:34px;height:34px;padding:0;display:inline-grid;place-items:center;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-gear[aria-expanded="true"]{background:var(--cd-gold,#CEA577);color:#162D4C;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-body .alk-x{width:36px;padding:0;justify-content:center;}

/* ---- v3: ONE compact row — title | lock method (fills the middle) | gear | Export · Import · Invite ---- */
.req-cc .vc-otac-panel > .vc-panel-head.alk-head{flex-wrap:nowrap;gap:12px;padding:9px 14px!important;min-height:0;}
.req-cc .vc-otac-panel > .vc-panel-head.alk-head .otac-title{font-size:clamp(17px,1.6vw,21px);white-space:nowrap;gap:8px;}
.alk-head > div:first-child{flex:none;}
.alk-head > .alk-mid{flex:1 1 0;min-width:0;justify-content:flex-start;gap:8px;}
.alk-head > .alk-mid .alk-mid-t{flex:none;width:30px;height:30px;justify-content:center;border-radius:9px;background:rgba(255,255,255,.08);color:var(--cd-gold2,#DDBB94);font-size:13px;letter-spacing:0;}
.alk-head .alk-modes{flex:1 1 0;min-width:0;max-width:none;padding:3px;gap:2px;overflow:hidden;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-mode{flex:1 1 0;min-width:0;justify-content:center;height:30px;padding:0 8px;gap:6px;font-size:12px;}
.alk-mode span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.alk-mode em{top:1px;inset-inline-end:3px;font-size:9px;letter-spacing:0;padding:0;background:none;color:var(--cd-gold2,#DDBB94);}
.alk-mode[aria-checked="true"] em{color:#162D4C;}
.alk-head > .otac-bk-bar{flex:none;gap:6px!important;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-gear,
.req-cc .vc-otac-panel > .vc-panel-head > .otac-bk-bar > button,
.req-cc .vc-otac-panel > .vc-panel-head > .otac-bk-bar .oc-inv > button{height:30px;border-radius:9px;font-size:11.5px;padding:0 10px;margin:0;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-gear{width:30px;padding:0;}
.alk-head > .alk-mid .alk-gear{flex:none;}

/* "No pending requests" — a hairline status row instead of a full-height bar */
.req-cc .vc-otac-panel #otacRequestsHost{margin-top:0;}
.req-cc .vc-otac-panel .oc-req.is-empty{display:flex;align-items:center;gap:7px;margin:0 14px;padding:3px 0;min-height:0;border:0;border-bottom:1px solid var(--cd-line,#E3E7EC);border-radius:0;background:transparent;box-shadow:none;font-size:11.5px;line-height:1.3;color:var(--cd-mute,#5F6B7A);}
.req-cc .vc-otac-panel .oc-req.is-empty i{color:var(--cd-green,#1E8E5A);font-size:11px;}
.req-cc .vc-otac-panel .oc-req.is-empty .oc-req-x{padding:0 4px;font-size:11px;}
.req-cc .vc-otac-panel .oc-issue{margin-top:8px;}
.req-cc .vc-otac-panel #otacListHost{margin-top:8px;}

/* narrower screens: tools stay on the title row, the lock method gets its own full row (labels stay readable) */
@media (max-width:1180px){
  .req-cc .vc-otac-panel > .vc-panel-head.alk-head{flex-wrap:wrap;row-gap:8px;}
  .alk-head > div:first-child{order:1;flex:1 1 auto;}
  .alk-head > .otac-bk-bar{order:2;flex:none;}
  .alk-head > .alk-mid{order:3!important;flex:1 1 100%;}
  .alk-head .alk-modes{max-width:none;}
}
@media (max-width:640px){
  .alk-head > .otac-bk-bar{flex:1 1 100%;}
  .alk-head .alk-modes{overflow-x:auto;contain:none;width:auto;flex:1 1 0;min-width:0;}
  .alk-head > .alk-mid{width:100%;}
  .req-cc .vc-otac-panel > .vc-panel-head .alk-mode{flex:none;padding:0 11px;}
  .alk-head > .alk-mid{flex-direction:row;align-items:center;}
  .alk-head > .alk-mid .alk-mid-t{display:none;}
}


/* ---- v4: finishing polish ---- */
/* lock method strip: softer glass, inner highlight, smooth state changes */
.alk-modes{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(0,0,0,.18);border-color:rgba(255,255,255,.14);}
.req-cc .vc-otac-panel > .vc-panel-head .alk-mode{transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease;letter-spacing:.1px;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-mode:active{transform:scale(.97);}
.req-cc .vc-otac-panel > .vc-panel-head .alk-mode i{opacity:.8;transition:opacity .18s;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-mode:hover i,.req-cc .vc-otac-panel > .vc-panel-head .alk-mode[aria-checked="true"] i{opacity:1;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-mode[aria-checked="true"]{background:linear-gradient(180deg,#E4C49C,var(--cd-gold,#CEA577));box-shadow:0 3px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.45);}
/* lock icon tile shows the live state: green = locked, amber = open */
.alk-head > .alk-mid .alk-mid-t{position:relative;border:1px solid rgba(255,255,255,.14);}
.alk-head > .alk-mid .alk-mid-t::after{content:"";position:absolute;top:-3px;inset-inline-end:-3px;width:9px;height:9px;border-radius:50%;border:2px solid #17294a;background:#e9a23b;}
.alk-head[data-lock="locked"] > .alk-mid .alk-mid-t::after{background:#3ccf8e;}
/* tools: group them with a hairline divider, uniform glass buttons */
.alk-head > .otac-bk-bar{padding-inline-start:12px;border-inline-start:1px solid rgba(255,255,255,.14);}
.req-cc .vc-otac-panel > .vc-panel-head .alk-gear,
.req-cc .vc-otac-panel > .vc-panel-head > .otac-bk-bar > button,
.req-cc .vc-otac-panel > .vc-panel-head > .otac-bk-bar .oc-inv > button{transition:background .15s,border-color .15s,transform .12s;}
.req-cc .vc-otac-panel > .vc-panel-head .alk-gear:hover,
.req-cc .vc-otac-panel > .vc-panel-head > .otac-bk-bar > button:hover,
.req-cc .vc-otac-panel > .vc-panel-head > .otac-bk-bar .oc-inv > button:hover{border-color:rgba(255,255,255,.4);}
.req-cc .vc-otac-panel > .vc-panel-head :is(button,.alk-mode):focus-visible{outline:2px solid var(--cd-gold2,#DDBB94);outline-offset:2px;}
/* title: gold key tile */
.req-cc .vc-otac-panel .otac-title i{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(206,165,119,.16);border:1px solid rgba(206,165,119,.35);font-size:12px!important;}
/* floating settings card: notch pointing at the strip, clearer sections, tidy footer */
.req-cc .vc-otac-panel > .vc-panel-head > .alk-body{border-radius:16px;padding:14px;gap:12px;background:linear-gradient(180deg,#183057,#122441);}
.alk-body::before{content:"";position:absolute;top:-6px;inset-inline-start:150px;width:12px;height:12px;transform:rotate(45deg);background:#183057;border-top:1px solid rgba(255,255,255,.2);border-inline-start:1px solid rgba(255,255,255,.2);}
.alk-top{padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12);}
.alk-state b{font-size:14.5px;letter-spacing:.1px;}
.alk-state b::before{content:"";display:inline-block;width:8px;height:8px;margin-inline-end:8px;border-radius:50%;background:#3ccf8e;box-shadow:0 0 0 3px rgba(60,207,142,.2);vertical-align:1px;}
.alk-body[data-mode="open"] .alk-state b::before{background:#e9a23b;box-shadow:0 0 0 3px rgba(233,162,59,.2);}
.alk-body[data-mode="admin"] .alk-state b::before{background:#ef6b5e;box-shadow:0 0 0 3px rgba(239,107,94,.2);}
.alk-body textarea,.alk-body input[type=text]{transition:border-color .15s,background .15s;}
.alk-body textarea:hover,.alk-body input[type=text]:hover{border-color:rgba(255,255,255,.38);}
.alk-pending{animation:alkPulse 1.8s ease-in-out infinite;}
@keyframes alkPulse{50%{box-shadow:0 0 0 4px rgba(224,138,0,.18);}}
@media (prefers-reduced-motion:reduce){.alk-pending{animation:none;}.req-cc .vc-otac-panel > .vc-panel-head .alk-mode{transition:none;}}
/* quiet status row under the header */
.req-cc .vc-otac-panel .oc-req.is-empty .oc-req-x{border-radius:6px!important;opacity:.6;transition:opacity .15s,background .15s;}
.req-cc .vc-otac-panel .oc-req.is-empty .oc-req-x:hover{opacity:1;background:var(--cd-soft,#F1F3F6)!important;}
@media (max-width:1180px){.alk-head > .otac-bk-bar{border-inline-start:0;padding-inline-start:0;}.alk-body::before{inset-inline-start:24px;}}