/* V17: targeted mobile layout and access code management */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
input,select,textarea,button{max-width:100%;min-width:0}
.access-code-field{display:grid;gap:8px;margin:14px 0 20px}
.access-code-field small{font-size:12px;color:#c5afbd;line-height:1.5}
.pm-code-panel{border:1px solid #554052;background:linear-gradient(145deg,#281e2a,#1b1722);border-radius:20px;padding:24px;margin:20px 0;min-width:0}
.pm-code-panel h2{font-weight:800;font-size:19px;margin-bottom:16px}
.pm-code-form{display:flex;align-items:end;gap:12px;flex-wrap:wrap}
.pm-code-form>div{flex:1 1 190px;display:grid;gap:8px}
.pm-code-form button{min-height:44px}
.pm-code-reveal{margin-top:16px;padding:14px;border-radius:12px;border:1px solid #a7668a;background:#3b2738;display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;overflow-wrap:anywhere}
.pm-code-reveal.hide{display:none!important}
.pm-code-reveal span{font-family:monospace;font-size:14px;user-select:all;overflow-wrap:anywhere}
.pm-code-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pm-code-scroll{overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}
.pm-code-table{width:100%;border-collapse:collapse;min-width:590px;font-size:13px}
.pm-code-table th,.pm-code-table td{text-align:left;padding:13px 9px;border-bottom:1px solid #ffffff1b;white-space:nowrap}
.pm-code-table td:last-child{display:flex;gap:7px}
.pm-code-table .ghost{font-size:12px;padding:8px 10px}
.pm-code-status{font-weight:700}
@media(max-width:700px){
.signature-app .site-shell,.signature-app .workspace-grid,.signature-app .workspace-main,.signature-app .workspace-aside{min-width:0!important;max-width:100%!important}
.signature-app .workspace-main,.signature-app .workspace-aside{padding:20px 16px!important}
.signature-app .field-inline{display:flex;flex-wrap:wrap;gap:9px}
.signature-app .field-inline input{flex:1 1 100%!important;width:100%!important}
.signature-app .field-inline button{flex:1 1 100%!important;min-height:43px}
.signature-app .form-stack input,.signature-app .form-stack select{width:100%;font-size:16px}
.signature-app .site-header{gap:12px;flex-wrap:wrap}
.signature-app .site-nav{flex-wrap:wrap;gap:8px}
.signature-admin #dashboard main{width:100%!important;min-width:0!important;padding:18px 14px!important}
.signature-admin #dashboard header h1{font-size:clamp(24px,7vw,34px)!important;overflow-wrap:anywhere}
.signature-admin #dashboard .metric{min-width:0!important;overflow:hidden}
.signature-admin #dashboard .metric *{overflow-wrap:anywhere}
.pm-code-panel{padding:17px 14px;border-radius:16px}
.pm-code-form{display:grid;grid-template-columns:minmax(0,1fr)}
.pm-code-form button{width:100%}
}
@media(max-width:390px){.signature-admin #dashboard .grid.gap-4.sm\:grid-cols-2{grid-template-columns:minmax(0,1fr)!important}}

/* V17.1: consistent select, compact create form spacing */
.signature-admin .pm-code-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px}
.signature-admin .pm-code-form>div{min-width:0;display:flex;flex-direction:column;gap:8px}
.signature-admin .pm-code-form select.field{display:block;width:100%;height:50px;min-height:50px;margin:0;padding:0 42px 0 16px;border:1px solid #514456;border-radius:12px;background-color:#121119;color:#fff;font:inherit;font-size:14px;line-height:normal;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23d8a4be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.signature-admin .pm-code-form select.field:focus{outline:2px solid #ad315a;outline-offset:2px}
.signature-admin .pm-code-form button{height:50px;min-height:50px;white-space:nowrap;margin:0}
.signature-app .access-code-field{margin:0!important;gap:8px!important}
.signature-app .access-code-field label,.signature-app .access-code-field small{margin:0!important}
.signature-app .access-code-field input{margin:0!important}
.signature-app .domain-health{margin-bottom:0!important}
.signature-app .form-stack:has(.access-code-field){gap:18px!important}
@media(max-width:700px){.signature-admin .pm-code-form{grid-template-columns:minmax(0,1fr)}.signature-admin .pm-code-form button{width:100%}}

/* V17.2 — Mobile layout and server-session access gate */
.access-gate{position:fixed;inset:0;z-index:9999;background:rgba(7,6,11,.86);backdrop-filter:blur(9px);display:grid;place-items:center;padding:18px;overflow-y:auto}
.access-gate.hide{display:none!important}
.access-gate-card{width:min(100%,420px);border:1px solid #624157;border-radius:24px;background:#1d1822;box-shadow:0 30px 80px #0009;padding:clamp(22px,5vw,32px);color:#f9edf4}
.access-gate-card .gate-icon{display:grid;place-items:center;background:#452339;color:#e99bbb;width:48px;height:48px;border-radius:15px;margin-bottom:18px;font-size:24px}
.access-gate-card h2{font-size:clamp(22px,5vw,28px);font-weight:800;line-height:1.2;margin:0 0 10px}
.access-gate-card p{font-size:14px;line-height:1.55;color:#bcaeba;margin:0 0 22px}
.access-gate-card form{display:grid;gap:12px}
.access-gate-card label{font-size:13px;font-weight:700}
.access-gate-card input{width:100%;font-size:16px}
.access-gate-card .gate-error{color:#ffabb8;margin:0;font-size:13px}
.access-gate-card .gate-footnote{text-align:center;margin:18px 0 0;font-size:13px}
.access-gate-card a{color:#f4a4c7;text-decoration:underline}
.signature-app .password-setting{min-width:0}
.signature-app .password-setting .password-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;flex-direction:row!important;width:100%!important}
.signature-app .password-setting .password-row>span{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-width:0!important;gap:5px!important;overflow-wrap:normal!important}
.signature-app .password-setting .password-row strong{display:block!important;font-size:15px!important;line-height:1.35!important;white-space:normal!important}
.signature-app .password-setting .password-row small{display:block!important;font-size:12px!important;line-height:1.5!important;white-space:normal!important}
.signature-app .password-setting .password-row input[type=checkbox]{width:21px!important;height:21px!important;min-width:21px!important;flex:0 0 21px!important;margin:0!important;accent-color:#b1396c}
.signature-app .address-controls{display:flex!important;gap:10px!important;flex-wrap:wrap!important;min-width:0!important}
.signature-app .address-controls input{flex:1 1 230px!important;min-width:0!important;width:auto!important;text-overflow:ellipsis}
.signature-app .address-controls button{flex:0 0 auto!important;min-width:90px!important}
.signature-app .mailbox-password-form{display:flex!important;flex-wrap:wrap!important;gap:10px!important;min-width:0!important}
.signature-app .mailbox-password-form input{flex:1 1 250px!important;min-width:0!important;padding-right:18px!important}
.signature-app .mailbox-password-form button{flex:0 0 auto!important}
.signature-app .viewer-shell{min-width:0!important;max-width:100%!important;overflow:hidden!important}
.signature-app .viewer-frame{width:100%!important;max-width:100%!important;min-width:0!important;display:block!important;border:0!important;background:#fff}
.signature-app .viewer-top{min-width:0!important;gap:10px!important}
.signature-app .viewer-top>div{min-width:0!important;overflow-wrap:anywhere}
.signature-app .viewer-meta{overflow-wrap:anywhere}
.signature-app .inbox-toolbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;flex-wrap:wrap!important}
.signature-app .sync-bar{display:flex!important;gap:10px!important;flex-wrap:wrap!important;align-items:center!important}
@media(max-width:700px){
 .signature-app .password-setting .password-row{padding:16px!important}
 .signature-app .address-controls{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
 .signature-app .address-controls input,.signature-app .address-controls button{width:100%!important;min-width:0!important}
 .signature-app .mailbox-password-form{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
 .signature-app .mailbox-password-form input,.signature-app .mailbox-password-form button{width:100%!important;min-width:0!important}
 .signature-app .viewer-shell{padding:16px!important}
 .signature-app .viewer-frame{min-height:340px!important}
}

/* V17.4: consistent access code admin form alignment */
.signature-admin .pm-code-form{display:grid!important;grid-template-columns:minmax(0,1fr) 156px!important;align-items:end!important;gap:12px!important}
.signature-admin .pm-code-form>div{display:grid!important;grid-template-rows:auto 50px auto!important;gap:8px!important;min-width:0!important}
.signature-admin .pm-code-form input.field{height:50px!important;min-height:50px!important;width:100%!important;margin:0!important}
.signature-admin .pm-code-form button{height:50px!important;min-height:50px!important;align-self:end!important;margin-bottom:26px!important;width:100%!important}
.signature-admin .pm-code-form small{min-height:18px!important;line-height:18px!important}
@media(max-width:700px){.signature-admin .pm-code-form{grid-template-columns:minmax(0,1fr)!important}.signature-admin .pm-code-form button{margin-bottom:0!important}}

/* V17.5 — consistent security navigation */
.pm-security-access-card{padding:20px 24px;margin:0 0 20px;border:1px solid #554053;border-radius:16px;background:#241d28;}
.pm-security-access-card h2{font-size:20px;font-weight:750;margin:0 0 8px;}
.pm-security-access-card p{color:#c9b9c7;margin:0 0 16px;line-height:1.5;}
.pm-security-access-link{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;background:#a33362;border-radius:10px;color:#fff;text-decoration:none;font-weight:700;}
#generate:disabled{opacity:.55;cursor:not-allowed;}
@media(max-width:600px){.pm-security-access-card{padding:16px;}.pm-security-access-link{width:100%;}}

body.creation-gate-open{overflow:hidden}
.access-gate:not(.hide){display:flex}

/* V17.7: center the access gate and prevent background scrolling */
html:has(body.creation-gate-open){overflow:hidden!important;overscroll-behavior:none!important}
body.creation-gate-open{overflow:hidden!important;height:100dvh!important;overscroll-behavior:none!important}
.signature-app .access-gate:not(.hide){position:fixed!important;inset:0!important;z-index:99999!important;display:flex!important;justify-content:center!important;align-items:center!important;box-sizing:border-box!important;width:100vw!important;height:100dvh!important;max-height:100dvh!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:20px!important;margin:0!important}
.signature-app .access-gate-card{flex:0 1 420px!important;max-width:100%!important;max-height:calc(100dvh - 40px)!important;overflow-y:auto!important;margin:auto!important;box-sizing:border-box!important}
@media(max-width:480px){.signature-app .access-gate:not(.hide){padding:16px!important}.signature-app .access-gate-card{max-height:calc(100dvh - 32px)!important;border-radius:20px!important}}


/* Inbox password eye: wrapper is a flex child, so size the wrapper instead of input. */
@media (max-width: 640px) {
  .signature-app .mailbox-password-form > .password-field {
    position: relative !important;
    display: block !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .signature-app .mailbox-password-form > .password-field > input.field {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 58px !important;
  }
  .signature-app .mailbox-password-form > .password-field > button.password-eye {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
  }
  .signature-app .mailbox-password-form > button[type="submit"] {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* Mobile: current address controls fill the full card width. */
@media (max-width: 700px) {
  .signature-app .inbox-address {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .signature-app .inbox-address > div:first-child {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .signature-app .inbox-address .address-controls {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .signature-app .inbox-address .address-controls > input,
  .signature-app .inbox-address .address-controls > button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}